Answers:
ko.applyBindings
接受第二个参数,该参数是要用作根的DOM元素。
这将使您可以执行以下操作:
<div id="one">
<input data-bind="value: name" />
</div>
<div id="two">
<input data-bind="value: name" />
</div>
<script type="text/javascript">
var viewModelA = {
name: ko.observable("Bob")
};
var viewModelB = {
name: ko.observable("Ted")
};
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));
</script>
因此,您可以使用此技术将viewModel绑定到加载到对话框中的动态内容。总体而言,您只需要注意不要applyBindings
在同一元素上多次调用,因为您将获得多个事件处理程序。
cleanNode
并且removeNode
不会删除事件处理程序,因此请谨慎使用。在某些情况下,最好在这些区域上使用template
或with
绑定,以便呈现新元素。
$(element).unbind();
删除所有处理程序。
尽管Niemeyer的答案是对该问题的更正确答案,但您也可以执行以下操作:
<div>
<input data-bind="value: VMA.name" />
</div>
<div>
<input data-bind="value: VMB.name" />
</div>
<script type="text/javascript">
var viewModels = {
VMA: {name: ko.observable("Bob")},
VMB: {name: ko.observable("Ted")}
};
ko.applyBindings(viewModels);
</script>
这意味着您不必指定DOM元素,甚至可以将多个模型绑定到同一元素,如下所示:
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
我设法在运行时将自定义模型绑定到元素。代码在这里:http : //jsfiddle.net/ZiglioNZ/tzD4T/457/
有趣的一点是,我将data-bind属性应用于未定义的元素:
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
您应该查看with
绑定以及controlsDescendantBindings
http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
ko.cleanNode(document.getElementById("one")
清理或ko.removeNode(document.getElementById("one")
清理并从DOM中删除节点。