knockoutjs：关于嵌套DOM绑定

Question

约嵌套DOM绑定

http://jsfiddle.net/sxd1140/XWvYk/1/

只有这样

https://github.com/hunterloftis/knockout.namespaces

或有其他方式来解决

Answer 1

命名空间插件可能是最好的解决方案，如果你需要有多个混合的视图模型。

虽然典型的答案是将主视图模型与子视图模型关联并绑定到主视图模型。如：

var viewModel = { 
    body: { 
     click: function() { alert("body"); } 
    }, 
    div: { 
     click: function() { alert("body"); } 
    } 
}; 

ko.applyBindings(viewModel); 

现在，您必须将点击次数绑定到body.click和div.click。

一个典型的模式是做这样的事情：

var viewModel = { 
    body: ko.observable(), 
    div: ko.observable() 
}; 

现在，你可以使用模板绑定，这将不会呈现任何东西，如果观察的是零，并允许您直接指定click代替div.click，因为您将视图模型作为模板绑定的参数data。然后，如果/当子视图模型被填充（可能通过AJAX），UI将更新。绑定会是这样的：

<div data-bind="template: { name: 'main', data: body, templateOptions: { div: div } }"></div> 

<script id="main" type="text/html"> 
    <button data-bind="click: click">body</button> 
    <div id="a" data-bind="template: { name: 'div', data: $item.div }"></div> 
</script> 

<script id="div" type="text/html"> 
    <button data-bind="click: click">div</button> 
</script> 

的“格”视图模型传递到使用templateOptions表明你不会需要依靠其全球范围内的ViewModel嵌套模板（不需要访问视图模型。 div嵌套模板内）。

样品在这里：http://jsfiddle.net/rniemeyer/7ZsGK/