动态视图模型的淘汰赛

Question

互联网上有大量关于如何使用 Knockout 处理动态视图（通过 ajax 调用）的信息，但是动态视图模型有最佳实践吗？

例如，假设我有一个单页应用程序，它根据角色、用户选择、上下文等（通过 ajax）呈现不同类型的表单（具有不同的输入字段）。我不仅会为每个表单使用模板，而且我'我想对视图模型做同样的事情，因为每个视图模型可能有许多非常不同的属性，并且为每个可能的模板使用一个庞大的视图模型是不切实际的。

我对 ko 有点菜鸟，它可能不适合以这种方式使用。非常感谢任何建议。

Answer 1

执行此类操作的一种流行方法是拥有一个托管子视图模型的主视图模型。

这是定义具有模板和关联数据的“模型”对象的一个​​非常基本的示例。

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/

显然，您不太可能在选择中绑定模型的选择，但它有助于展示它是如何工作的。您的模型可以是属性名称与键匹配的对象，而不是数组。

“模型”对象中的“数据”将是您的子视图模型。

Answer 2

我面临着同样的问题。

尝试 Knockout 命名空间