Question

有没有办法将单个视图模型应用于多个元素？

基本上我有一个html的部分，视图模型（VM1）应该被绑定，我有另一个视图模型（VM2），需要绑定到它的一个子部分。 KO似乎并不喜欢这样（我甚至尝试在小节上使用ko.cleanNode(element)）。因此，我想要做的是通过将其应用于需要它的每个部分来更具体。如果没有代码，这很难解释，所以我们在这里：

<section>
    <ul>
        <li id="one">...</li>
        <li id="two">...</li>
        <li id="three">...</li>
        <li id="diffmodel">...</li>
    </ul>
</section>

我目前所拥有的是VM1绑定到<section>，VM2绑定到#diffmodel，但KO似乎不喜欢这样。

我目前的目标（以及提出的问题）是将VM1应用于#one，#two，#three和VM2到{{1但是，这似乎也不起作用（#diffmodel根本没有约束。）

这种情况有一个很好的解决方案吗？

Answer 1

一个非常简单的解决方案是使用自定义绑定来防止绑定元素的子节点。

这将是：

ko.bindingHandlers.ignoreBindings = {
    init: function() {
        return { controlsDescendantBindings: true };
    }        
};

var VM1 = {
    valueOne: ko.observable("one"),
    valueTwo: ko.observable("two"),
    valueThree: ko.observable("three")   
};

var VM2 = {
    different: ko.observable("different")  
};

ko.applyBindings(VM1);
ko.applyBindings(VM2, document.getElementById("diffmodel"));

HTML：

<section>
    <ul>
        <li id="one" data-bind="text: valueOne"></li>
        <li id="two" data-bind="text: valueTwo"></li>
        <li id="three" data-bind="text: valueThree"></li>
        <li data-bind="ignoreBindings: true">
            <div id="diffmodel" data-bind="text: different"></div>
        </li>
    </ul>
</section>

此处示例：http://jsfiddle.net/rniemeyer/FesgK/

在KO 2.1中（目前在RC中），ignoreBindings自定义绑定甚至可以用作无容器绑定，如：http://jsfiddle.net/rniemeyer/FesgK/1/

将Knockout.js模型应用于多个元素

1 个答案: