动态视图模型的淘汰赛

Question

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

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

我是一个 ko 的菜鸟，它可能不适合以这种方式使用。非常感谢任何建议。

Answer 1

我也面临同样的问题。

试试Knockout Namespaces

Answer 2

做这种事情的一种流行方法是拥有一个主视图模型来托管子视图模型。

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

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/

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

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