使用动态视图模型进行淘汰赛

Question

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

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

我有点像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/

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

"模型"对象中的"数据"将是您的子视图模型.