0

次のようなマークアップを使用して、Windows デスクトップのようなものを作成していたとします。

<div id="os">
   <div id="desktop"></div>
   <div id="taskbar"></div>
</div>

次に、次のようにバインドします。

ko.applyBindings(vm, $("#os")[0]);

次に、この新しいマークアップをデスクトップ div に挿入すると:

<div id="newWidget">
   ...
</div>

そして電話する

ko.applyBindings(vm2, $("#newWidget")[0]);

新しいマークアップをまったく異なるビュー モデルにバインドすることは問題になるでしょうか?

この種の重複した結合領域が原因で問題が発生した場合はどうなりますか?

4

1 に答える 1

1

そのような HTML を挿入する代わりに、強力なテンプレート エンジンを使用します。テンプレートをスクリプトタグとして挿入し、次のように使用する必要がある標準エンジンを使用すると、さまざまな方法で実行できます。

<div data-bind="foreach: widgets">
   <!-- ko template: { name: view, data: $data } --><!-- /ko -->
</div>

上記のソリューションにはview、テンプレート名を持つメンバーが必要です。これにより、VM とビューの間の結合が作成され、さらにテンプレートの構文が乱雑になります。

Knockout.BindingConventions というライブラリを作成しました。これは、明示的な構成よりも規則を優先する暗黙のライブラリです。その機能の 1 つは、ViewModel をビューに接続することです。htmlは次のようになります

<div data-name="widgets">
   <!-- ko name: $data --><!-- /ko -->
</div>

ウィジェットの配列に が含まれている場合はテンプレートCalendarWidgetViewModelを探し、 も含まれている場合はテンプレートを探します。CalendarWidgetViewContactsWidgetViewModelContactsWidgetView

ウィキ

nugeでインストール

Install-Package Knockout.BindingConventions

上記のソリューションでは、スクリプト タグとしてテンプレートを使用する必要があります

ajax を使用してオンデマンドでテンプレートをロードする外部テンプレート ソース エンジンがあります。

例https://github.com/ifandelse/Knockout.js-External-Template-Engine

上記のコンベンションライブラリを使用する独自のものを作成しました

ウィキ

構成したら (テンプレート リクエストを処理する残りのサービスを作成する必要があります)、あとは実行するだけですbootstrap.loadView(model, this.view);

モデル タイプを調べてビュー名を解決し、その ViewModel のすべてのビューをキャッシュまたはサーバーから取得します。

于 2013-09-22T10:48:55.057 に答える