1

DOM 要素を再レンダリングせずに、一部の DOM 要素にバインディングを適用する方法があるかどうか疑問に思っています。

私の状況では、サーバーが Razor テンプレートを使用して HTML ビルドを返しているためです。したがって、バックエンドはすべての DOM 構築を処理します。

私がやりたいことは、完全にレンダリングされたマークアップを取得し、Knockout.js などの堅牢な JS ライブラリを使用して、何らかのバインディングをそれに適用することだけです。これはまったく可能ですか。

たとえば、通常のクライアント側で作成されたマークアップでは、次のようにします。

<ul data-bind="foreach: fruits">
    <li data-bind="text: name"></li>
</ul>

次に、バインディングを適用し、html を作成します。

ko.applyBindings(new ViewModel(data));

次のような結果になります。

<ul data-bind="foreach: fruits">
    <li data-bind="text: name">Apples</li>
    <li data-bind="text: name">Pairs</li>
    <li data-bind="text: name">Banana</li>
    <li data-bind="text: name">Peaches</li>
    <li data-bind="text: name">Grapes</li>
</ul>

しかし、Razor テンプレートを使用すると、HTML は既にこのように返されますが、まだバインディングを適用したいと考えています。HTMLを再レンダリングせずにこれを行うにはどうすればよいですか。私が考えることができる他の唯一の方法は、独自のカスタムバインディングを構築することですが、それは避けたいです.

これを行うために使用できる別のフレームワークはありますか? バックボーンがこれを行う可能性があると聞きました。

4

2 に答える 2

4

他の回答者の何人かが言ったように、これを別の方法で行う方がよいと思います。データを取得するための Ajax 呼び出しの追加のサーバー ラウンド トリップを避けたい場合は、サーバーにデータを表す JSON 文字列をレンダリングさせ、それを HTML テンプレートと共に HTML に埋め込むことができます。

その後、JSON.parse を使用してこの文字列を JSON ツリーに解析し、それらの値をビュー モデルのコンストラクターでビュー モデルにバインドできます。

そうすれば、応答の一部としてサーバーからデータを返すことでパフォーマンスが向上しますが、Knockout が変形することはありません。追加のボーナスとして、たとえば Update this data に AJAX 動作を追加すると、はるかに簡単になります。

于 2013-02-01T21:02:55.690 に答える
2

アプローチを混合しているように聞こえますが、これは少し混乱してしまいます。そうは言っても、DHTML などを単純化するために本当にこれを実行したい場合は、 foreach バインディングを提供されたマークアップに偽装しようとせず、サーバー側で提供されたモデルをモデルに反映させることをお勧めします。大まかな例:

var model = {
   fruits: {
      apple: { name: ko.observable('Apples') },
      pairs: { name: ko.observable('Pairs') },
      banana: { name: ko.observable('Banana') },
      peaches: { name: ko.observable('Peaches') },
      grapes: { name: ko.observable('Grapes') },
   }
}

<ul data-bind="with: fruits">
    <li data-bind="text: apple.name">Apples</li>
    <li data-bind="text: pairs.name">Pairs</li>
    <li data-bind="text: banana.name">Banana</li>
    <li data-bind="text: peaches.name">Peaches</li>
    <li data-bind="text: grapes.name">Grapes</li>
</ul>

それは醜いです:-)最良の答えは、別のアプローチを検討してください。

于 2013-02-01T20:55:55.260 に答える