1

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

基本上我有一段 htmlVM1应该绑定到视图模型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, and #three, and VM2to #diffmodel，但这似乎也不起作用（VM1根本不受约束）。

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

4

1 回答 1

2

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

它会是这样的：

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/

于 2012-05-03T04:25:09.100 回答