💨

宣言的なJSフレームワーク 非同期プロパティ その2

2022/05/20に公開約1,900字

概要

非同期でリストを取得するサンプルがあったので、それをdata-x.jsでやってみよう。

https://zenn.dev/winteryukky/articles/1c8b48155d5f29

動作

フレームワーク

v0.5.2以降

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

非同期データの展開

アスタリスクを含むプロパティを展開する部分が、まったく非同期に対応できていなかったので、対応した。

Javascript
class AppViewModel {
  "@list#get" = async () => {
    return fetch(url).then(response => response.json())
  }
  // 非同期でデータを取得したあと、下記のプロパティを展開する
  "@list.*.name";
  "@list.*.value";
}

解説

index.html

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index.html

main.html

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/html/main.html

検索する文字列の入力と検索ボタン

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/html/main.html#L4-L5

検索結果の表示

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/html/main.html#L8-L14

main.js

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/module/main.js

検索する文字列を格納

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/module/main.js#L5-L5

検索結果のリストを非同期に取得。取得し終わったら、プロパティを展開し描画する。

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/module/main.js#L6-L12

検索結果を展開するプロパティ。

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/module/main.js#L13-L15

検索ボタンを押したときの処理。
context.notifyは、指定したプロパティの描画更新を通知。

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/module/main.js#L16-L16

main.bind.css

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/css/main.bind.css

ループ展開するリスト

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/css/main.bind.css#L1-L3

展開される要素

https://github.com/mogera551/data-x.js/blob/v0.5.2/demo/asyncAnime/index-spa/css/main.bind.css#L5-L15

感想

  • 結構シンプルに記述できたかも。
  • フレームワークの非同期対応はややこしい。

Discussion

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