動態視圖模型的淘汰賽

關於如何通過Knockout處理動態視圖（通過ajax調用）的interwebs上有很多信息，但是有動態視圖模型的最佳做法嗎？例如，假設我有一個頁面應用程序，它根據角色，用戶選擇，上下文等等（通過ajax）呈現不同類型的表單（具有不同的輸入字段），不僅我將使用每個表單的模板，但我想爲viewmodel做同樣的事情，因爲每個viewmodel可能有很多不同的屬性，並且對於每個可能的模板都有一個巨大的viewmodel是不現實的。動態視圖模型的淘汰賽

我是一個有ko的新手，它可能並不是要用於這種方式。任何意見非常感謝。

來源

2011-11-03 jimlyndon

做這種事情的一種流行方式是擁有一個主視圖模型來託管子視圖模型。

下面是定義具有模板和關聯數據的「模型」對象的一個非常基本的示例。

function Model(key, template, data) { 
    this.key = key; 
    this.template = ko.observable(template); 
    this.data = data; 
} 

var viewModel = { 
    models: ko.observableArray([ 
     new Model("user", "userTmpl", { first: "Bob", last: "Smith" }), 
     new Model("item", "itemTmpl", { name: "MyItem", description: "Here are some details" }) 
    ]), 
    selectedModel: ko.observable() 
}; 

ko.applyBindings(viewModel);

然後，你可以使用它像：

<select data-bind="options: models, optionsText: 'key', optionsCaption: 'select a model...', value: selectedModel"></select> 

<hr /> 

<div data-bind="with: selectedModel"> 
    <div data-bind="template: { name: template(), data: data }"></div>  
</div> 


<script id="userTmpl" type="text/html"> 
    <span data-bind="text: last"></span>, <span data-bind="text: first"></span> 
</script> 

<script id="itemTmpl" type="text/html"> 
    <h3 data-bind="text: name"></h3> 
    <div data-bind="text: description"></div> 
</script>

http://jsfiddle.net/rniemeyer/29kWf/

很顯然，你不可能綁定在選擇模型的選擇，但它有助於展示如何能行得通。而不是數組，模型可能是屬性名稱與密鑰匹配的對象。

「模型」對象中的「數據」將是您的子視圖模型。

來源

2011-11-03 21:38:16

謝謝瑞恩，我想我已經開始更清楚地看到KO了。使用這種方法加上KO Mapping插件將數據（第一，最後，名稱，描述等）綁定爲可觀察數據是否正確？在我的scenerio中，我通過ajax提取數據。事實上，如果我最終通過ajax同時提取模板和數據，我應該可以在Success回調中調用'applyBindings'來將所有東西都鉤住 - 正確嗎？當我有一些時間空閒時，我會在週末放棄這一點。 – jimlyndon

用這個想法使用映射插件絕對沒問題。在成功回調中調用applyBindings是很好的。除非傳遞第二個參數以將其限制爲某個元素，並且僅針對非子元素的多個元素進行多次調用，否則您只需要一次調用它。否則，在我提供的示例中，您可以先調用applyBindings，直到selectedModel被填充，否則實際上沒有任何綁定。 –

我面臨同樣的問題。

嘗試Knockout Namespaces

來源

2012-10-05 08:17:07

動態視圖模型的淘汰賽

回答

相關問題