使用迪朗達爾組成手動

我有一個空的容器在我的HTML這樣的：使用迪朗達爾組成手動

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

我想手動創建我的模型，並與一些觀點撰寫，然後使用JavaScript像注入結果到#workspace-container：

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'); 
} 
...

來源

2013-08-20 mehrandvd

通過在您的主視圖模型上創建一個屬性來顯示您正在嘗試編寫的視圖模型，您可能會描述這種方式。如果您不手動指定視圖，則將使用視圖定位器來查找指定視圖模型的視圖。

然後綁定這個樣子的：

//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 }); 
    }); 
} 
...

夫婦的注意事項：

撰寫結合會承認或尊重的workspaceContainer財產的後續變化。
您的視圖模型模塊返回一個構造函數以使其正常工作非常重要。

見節撰寫的顯式模型和視圖在此鏈接的更多信息：http://durandaljs.com/documentation/Using-Composition/

該代碼使用迪朗達爾2.0的預發佈版本進行測試。如果有問題，請告訴我，我會糾正它們。

來源

2013-08-20 12:12:04

這是一件好事。但我也需要動態選擇視圖。我剛剛更新了這個問題，以澄清我確切的問題。 – mehrandvd

我編輯了答案以反映更改 –

這很棒。事實上，我發現了一個使用'composition.compose（element，model）'的解決方案。但你的解決方案似乎更方便。 – mehrandvd

看一看的HTML結合 -

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

，可以讓你直接創建可觀察到的含有HTML標記。一如既往，一定不要將您的視圖暴露給HTML注入。

如果您想在HTML內部綁定，您將不得不變得富有創意，因爲您需要在DOM中可見之後將它們綁定。

另一個選擇可能是利用內置的模板綁定，但它不會爲您提供傳統的HTML注入，但可能更多的是您正在尋找的內容。

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

來源

2013-08-20 11:54:33

我需要的是手動綁定。我已更新我的問題，以澄清我確切的問題。謝謝。 – mehrandvd

假設你想迪朗達爾2.0處理此看一看例如三個的撰寫顯式模型和視圖在 Durandal的成分（http://durandaljs.com/documentation/Using-Composition/）

改變你的HTML沿東西節行應該讓你開始。

<div id="workspace-container" 
    data-bind="compose: { model:myViewModel, view:myView }"> 
</div>

來源

2013-08-20 11:59:22 RainerAtSpirit

我需要的是手動綁定。我已更新我的問題，以澄清我確切的問題。謝謝。 – mehrandvd

使用迪朗達爾組成手動

回答

相關問題