ajax - 使用动态 View 模型进行 knockout

Question

互联网上有大量关于如何使用 Knockout 处理动态 View (通过 ajax 调用)的信息，但是是否有动态 View 模型的最佳实践？

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

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

Answer 1

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

这是定义具有模板和关联数据的“模型”对象的真正基本示例。

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/

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

“模型”对象中的“数据”将是您的 subview 模型。