Question

我从this question & answer了解到我可以使用KnockoutJS将2个不同的视图模型绑定到2个不同的元素。

var viewModel1={...}
var viewModel2={...}

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

ko.applyBindings(viewModel1, document.getElementById('one'));
ko.applyBindings(viewModel2, document.getElementById('two'));

但是，有没有办法将2个局部视图模型绑定到同一个元素？

// This did not work for me

<div id='container'>
    <span data-bind='text: firstname' />
    <span data-bind='text: lastname' />   
</div>

var partialVM1={
    firstname:'John',
}
var partialVM2={
    lastname:'Adams',
}

var container=document.getElementById('container');
ko.applyBindings(partialVM1,container);
ko.applyBindings(partialVM2,container);

或者，KnockoutJS是否有办法将部分视图模型组合成单个视图模型？

之前的Stackoverflow答案似乎说＆＃34;没办法＆＃34;，但是我问是否有新添加的Knockout选项，或者是否有人为我的困境找到了一个很好的解决方法。

// Pseudo-code:
var combinedVM = ko.combine(partialVM1,partialVM2);
ko.applyBindings(combinedVM,container);

我问，因为2个局部视图模型是由不同的进程创建的（在Visual Studio中，有2个不同的t4脚本分别创建2个局部视图）。

如果没有简单的解决方法，我可以将2个t4脚本重构为一个脚本，但这需要适度的重新布线（如果可能的话，我宁愿避免使用它）。

还有其他选择吗？

Answer 1

您可以创建单个视图模型并使用数据绑定来更改上下文。

修改：jsFiddle

示例：

<div id='container'>
    <div id='context1' data-bind='with: partial1'>
    <span  data-bind='text: firstname' />
    </div>
    <div id='context2' data-bind='with: partial2'>
    <span data-bind='text: lastname' />   
    </div>
</div>


var partialVM1={
    firstname:'John',
}
var partialVM2={
    lastname:'Adams',
}

var combined = (function () {
            function combinedVM() {
                this.partial1 = ko.observable(partialVM1);
                this.partial2 = ko.observable(partialVM2);
            }
            return combinedVM;
        })();


var container=document.getElementById('container');
ko.applyBindings(combined,container);

Knockout：如何将多个局部视图模型应用于同一元素

1 个答案: