6

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の宣言型の良さを失うので、それはひどいです。さらに、ボイラーコードがたくさんあるので、一般的ではないので、ページ内のすべてのウィジェットに対して書き直します。

4

1 に答える 1

1

いくつかの js フレームワークを使用しているときに、すでに頭に浮かんだ良い質問です。

今のところ、javascript が有効になっている場合は、静的な html を非表示にして、Angular DOM を表示します。

生成する静的 html に相当する js モデルを注入する必要があります。これはあまり良くありません (DRY ではありません) が、DOM から初期データを取得しようとすると、IMHO を維持するのが難しくなります。すべての JavaScript/テンプレートを 1 つの js ファイルにまとめることができます。これにより、静的ページには 1 つのスクリプト インポートのみが含まれ、ページの重みはスクリプトなしの閲覧者に影響を与えなくなります。

于 2012-11-06T17:14:22.087 に答える