knockout.js - 使用 Knockout 将不同的模型绑定到页面上的不同部分

Question

我在我的 asp.net 应用程序中使用淘汰赛 javascript 库。

对于淘汰赛，我使用ko对象和applyBindings()方法来绑定它。现在我想将两个淘汰对象绑定到两个不同的用户界面部分。如何使用第二个淘汰对象或第二个数据源，以便在第二部分中使用它？

Answer 1

You can easily apply different bindings to different parts of the HTML code.

If you have a structure such as this:

<div id="one"></div>
<div id="two"></div>

Just do something like this:

ko.applyBindings(viewModelOne, document.getElementById('one'));
ko.applyBindings(viewModelTwo, document.getElementById('two'));

If you have a structure such as this:

<div id="one">
    <div id="two"></div>
</div>

You can use the controlsDescendantBindings flag to tell knockout to leave a certain child element alone. Use this in a custom binding such as the one below:

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

And use it like this:

<div id="one">
    <div data-bind="stopBinding: true">
        <div id="two"></div>
    </div>
</div>

I surrounded the 2nd div with the stopBinding function. This allows you to call the same applyBindings code like so:

ko.applyBindings(viewModelOne, document.getElementById('one'));
ko.applyBindings(viewModelTwo, document.getElementById('two'));

Reference: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html