🐕

宣言的なJSフレームワーク ブロック間共有変数

2022/05/25に公開約3,300字

概要

ブロック間の連携のために、ブロック間で使えるグローバル変数のようなものを導入
参考デモを解説

フレームワーク

v0.4.0以降

https://github.com/mogera551/data-x.js

デモ動作

タブを選択して、内容を変更する

共有変数の作成と各ブロックでの参照

共有変数は、boot時data変数として指定する。
注意、v0.4.0以降、bootの引数が変更になりました。

index.html
<script type="module">
datax.boot({ data: { content:"content1" } });
</script>

各ブロックのViewModelでは、this.$~で共有変数を参照できる。

ブロック
class AppViewModel {
  "@message#get" = () => this.$content; // "content1"を取得
}

共有変数の更新

各ブロックは、共有変数を更新することができる。
共有変数を更新すると他ブロックへ変更を通知する。プロパティ同様、依存関係ルールを使うことができる。

メニュー
class AppViewModel {
  "#eventClickMenu" = () => this.$content = "content2";
}
class AppViewModel {
  "@message#get" = () => this.$content;
}
const dependencyRules = [
  [ "message", [ "$content" ] ], // 共有変数$contentが更新された場合、messageの表示を変更
];

ブロックの構成

タブを選択するメニューブロックと、切り替えるコンテンツブロック(1~3)

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index.html#L5-L12

動作原理

共有変数に表示するコンテンツ名を保存。各コンテンツブロックは共有変数を参照し、自ブロックを表示するかどうかを決定する。メニューブロックは、タブを選択されたら、共有変数を変更する。

デモソース解説

index.html

メニューブロックと、各コンテンツブロック

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index.html#L5-L12

boot時、共有変数content作成、初期値は「content1」

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index.html#L15-L15

メニューブロック

タブをリストで持ち展開する

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/html/menu.html#L2-L4

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js

タブをリストで持つ

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js#L2-L2

タブの内容を表示

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js#L3-L3

タブクリック後の選択状態を示すプロパティ。アスタリスクを含むドット記法で簡単に定義できる。

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js#L4-L4

クリック時、共有変数を変更する

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js#L6-L6

依存関係ルール
$contentに変更があればcontents.*.selectedの表示を変更するため。
content.*.selectedは暗黙的にcontentに依存しているので、$contentに更新があれば、contentの表示を変更するルールを記述。

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/menu.js#L9-L11

メニューのタブの部分

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/css/menu.bind.css#L5-L9

contents.*.selectedが真の場合、class属性にselectedを追加

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/css/menu.bind.css#L7

コンテンツブロック

content1-3.html

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/html/content1.html

content1-3.js

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/content1.js

自コンテンツの表示フラグ。共有変数と自コンテンツ名が一致すれば真。

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/content1.js#L2-L2

依存関係ルール
共有変数$contentに更新があったら、表示フラグを変更。

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/module/content1.js#L6-L6

content1-3.bind.css

表示フラグが真の場合、ブロックを表示

https://github.com/mogera551/data-x.js/blob/v0.4.0/demo/sharedParam/index-spa/css/content1.bind.css#L2-L2

感想

共有変数と依存関係ルールを設定することで、ブロック間の状態を共有することができた。

Discussion

ログインするとコメントできます