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

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 答案似乎说“没办法”，但我想问是否有新添加的 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);