💨
宣言的なJSフレームワーク 非同期プロパティ その２
概要
非同期でリストを取得するサンプルがあったので、それをdata-x.jsでやってみよう。
動作
フレームワーク
v0.5.2以降
非同期データの展開
アスタリスクを含むプロパティを展開する部分が、まったく非同期に対応できていなかったので、対応した。
Javascript
class AppViewModel {
"@list#get" = async () => {
return fetch(url).then(response => response.json())
}
// 非同期でデータを取得したあと、下記のプロパティを展開する
"@list.*.name";
"@list.*.value";
}
解説
index.html
main.html
検索する文字列の入力と検索ボタン
検索結果の表示
main.js
検索する文字列を格納
検索結果のリストを非同期に取得。取得し終わったら、プロパティを展開し描画する。
検索結果を展開するプロパティ。
検索ボタンを押したときの処理。
context.notifyは、指定したプロパティの描画更新を通知。
main.bind.css
ループ展開するリスト
展開される要素
感想
- 結構シンプルに記述できたかも。
- フレームワークの非同期対応はややこしい。
Discussion