JSを無効にして相談できるアクセシブルなサイトを持っているとしましょう。
私はこのように要約できるニュースリストを持っています:
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
ページをリロードするたびに、最新のニュースが追加され、10を超えるニュースを取得した場合、古いニュースは破棄されます。
ここで、Angulard JSを使用した場合、データをモデルに配置し、ng-repeatを実行して、静的HTMLを削除する必要があります。リストは動的に入力されるため、JSを使用しているユーザーには、ほぼリアルタイムで更新されたリストが表示されます。
私が必要としているのは、2つを一緒に機能させることです。静的リストが必要です。JSがアクティブ化されている場合は、現在の要素をモデルに挿入し、angularjsで管理する必要があります。
今それをする私の現在の方法は次のとおりです:
- モデルが初期化されたら、リストDOMを分割し、データを手動で抽出して、すべての子リストを削除します
- リストにAngularテンプレートコードを挿入します
- Angularに魔法をかけてもらいましょう
Angularの宣言型の良さを失うので、それはひどいです。さらに、ボイラーコードがたくさんあるので、一般的ではないので、ページ内のすべてのウィジェットに対して書き直します。