1

ajax リクエストを介してコンテンツの一部をロードするプロジェクトがあります。私は毎回同じ情報構造 (json) を取得し、これらの構造を表す各 DOM-Layout の coffeescript クラスを作成しようとしました。

私はこれらの構造の最初の DOM 表現に取り組んでおり、私のコードは次のようなステートメントによって爆破されていcontrols.append @Legende.content.messageSpanます@Legende.content.itself.append $(labelNew).html "Name: "

問題: 私が実装しなければならない次の 3 つの DOM 表現があり、それが私のコードを爆発させます。

私の質問は次のとおりです。多くの DOM ツリーの変更を処理したり、ファイル数やファイル サイズの増加を防いだりするための主な方法は何ですか?

4

1 に答える 1

0

基礎となるモデルの変更に基づいて実際に大量の DOM 変更がある場合は、明示的な変更を必要とせずに暗黙的にモデルに DOM をバインドできるライブラリを使用することをお勧めします。このための最も人気のある 2 つのライブラリは次のとおりです。

  • knockoutjs (これだけを行い、他には何もしません)
  • angularjs (これと、必要な場合と必要でない場合がある他の多くのことを行います)

一般に、KnockoutJS はよりシンプルで親しみやすいものです。

Angular はもう少し複雑で意見が分かれていますが、プロジェクトが大きくなるにつれてスケールします。

これらのライブラリは、このように html に注釈を追加することで機能します (Knockout ベースの例)

<tr>
    <td><input data-bind="value: name" /></td>
    <td><select data-bind="options: $root.availableMeals, value: meal"></select></td>
    <td data-bind="text: formattedPrice"></td>
    <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
</tr>

dom は好きなように設定でき、バインドしたデータを反映して自動的に変更されます。

于 2013-06-13T12:11:19.793 に答える