Question

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

例如，假设我有一个单页应用程序，它根据角色，用户选择，上下文等呈现（通过ajax）不同类型的表单（具有不同的输入字段）。我不仅会为每个表单使用模板，但我想对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/

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

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

Answer 2

我正面临同样的问题。

尝试Knockout Namespaces

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

2 个答案: