0

HTML に次のような空のコンテナがあります。

<div id='workspace-container'></div>

モデルを手動で作成し、いくつかのビューで構成してから、次の#workspace-containerような javascript を使用して結果を挿入します。

var myViewModel = new ViewModel (param1, param2);
// Doing some actions on myViewModel

// Some MAGIC here:
composition.compose(myViewModel, myView, '#workspace-container');

そのような魔法を行うAPIは何ですか!?

Update1: 実際には、何らかの理由で手動バインディングが必要です。注入するものを選択できるようにしたい。何かのようなもの：

if (condition1) {
    var myViewModel1 = new ViewModel1 (param1, param2);
    composition.compose(myViewModel1, myView1, '#workspace-container');
}
else if (condition2) {
    var myViewModel2 = new ViewModel2 (param1, param2);
    composition.compose(myViewModel2, myView2, '#workspace-container');
}
...
4

3 に答える 3

4

あなたが説明している方法は、作成しようとしているビュー モデルを公開するメイン ビュー モデルにプロパティを作成することによって可能になります。ビューを手動で指定しない場合、ビュー ロケーターを使用して、指定されたビュー モデルのビューが検索されます。

次に、バインディングは次のようになります。

//in your view
<div id='workspace-container` data-bind='compose: workspaceContainer'></div>

//in your main view model expose the sub view model property property
var self = this;
this.workspaceContainer = ko.observable();

//later
var v, vm;
if ('condition1') {
    system.acquire("viewModels/viewModelForCondition1").done(function (modelCtor) {
        v = "views/viewModelForCondition1.html";
        vm = new modelCtor(param1, param2);
        self.workspaceContainer({ view: v, model: vm });
    });
} else {
    system.acquire("viewModels/viewModelForCondition2").done(function (modelCtor) {
        v = "views/viewModelForCondition2.html";
        vm = new modelCtor(param1, param2);
        self.workspaceContainer({ view: v, model: vm });
    });
}
...

いくつかのメモ:

  • Compose バインディングは、プロパティに対するその後の変更を認識または尊重しworkspaceContainerます。
  • これが正しく機能するためには、ビュー モデル モジュールがコンストラクター関数を返すことが重要です。

詳細については、このリンクのセクションExplicit Models and Viewsを参照してください: http://durandaljs.com/documentation/Using-Composition/

このコードは、Durandal 2.0 のプレリリース バージョンを使用してテストされています。問題がある場合はお知らせください。修正します。

于 2013-08-20T12:12:04.903 に答える
0

HTMLバインディングを見てください -

http://knockoutjs.com/documentation/html-binding.html

これにより、HTML マークアップを含むオブザーバブルを直接作成できます。いつものように、ビューを HTML インジェクションに公開しないようにしてください。

HTML 内にバインディングが必要な場合は、工夫が必要です。バインディングが DOM に表示された後にバインドする必要があるからです。

別のオプションとして、組み込みのテンプレート バインディングを利用することもできますが、これは従来の HTML インジェクションを提供するものではなく、探しているもの以上のものになる可能性があります。

http://knockoutjs.com/documentation/template-binding.html

于 2013-08-20T11:54:33.870 に答える
0

Durandal 2.0 ハンドルが必要な場合は、Durandal の構成 ( http://durandaljs.com/documentation/Using-Composition/ )の明示的なモデルとビューの構成セクションの例 3 を参照してください。

html を行に沿ったものに変更すると、開始する必要があります。

<div id="workspace-container" 
     data-bind="compose: { model:myViewModel, view:myView }">
</div>
于 2013-08-20T11:59:22.303 に答える