多个绑定（将绑定添加到已绑定的父视图中的局部视图）

Question

如何将绑定应用到已绑定的父视图中的部分视图？ 或者找到解决上述问题的方法...

我正在使用 asp.net，并且我的主视图正在做淘汰 ViewModelA 的员工。页面有许多 div（选项卡），用户可以通过这些选项卡导航，并且始终只有一个 ViewModel (ViewModelA)。 ViewModelA 属性填充在 div1、div2、div3 和 div4 中。简单的html结构是这样的：

<div id="mycontainer">
    <div id="tab1">..<populate viewmodela properties>..</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
     etc.
</div>


 ko.applyBindings(ViewModelA);

它工作正常，但现在要求发生了变化：我必须将部分视图插入其中一个 div/选项卡（在 #tab2 内）。此局部视图使用以下命令加载其自己的剔除模型：

 ko.applyBindings(partialViewModel, document.getElementById("partial_view_container"));

在这种情况下，绑定发生了两次（第一次调用ViewModelA 绑定时，第二次使用自己的绑定人员插入partialview 时）。这会产生一个错误：“您不能将绑定多次应用于同一个元素”。

我该如何解决这个问题？我知道对于applyBindings，有第二个参数是应该在其中完成绑定的容器，但在我的情况下，我没有一个用于ViewModelA 的容器，因为ViewModelA 填充了不同的div（选项卡)。

Answer 1

我以前也遇到过同样的问题..

我认为您需要将模型分为四个模型（根据four tabs）。但是您的模型实际上是一个模型，因此您需要将它们作为一个模型（这是棘手的部分）。

我们现在正在调查的是knockout multiple view models on one page ??

在我的应用程序中，我声明了一个 Master/Big/Parent/Container ViewModel，它的全部用途是拥有我页面中的每个视图模型的属性（记住四个模型）。

所以现在我页面的每个部分/选项卡都有自己的 ViewModel（可能相同但具有不同的数据/值），我有 MasterViewModel 将这些 ViewModel 保存在一个 (4 * 1) 中。

对于 HTML 部分，为了使您的 html 处理更容易，我强烈建议利用 with binding。

查看John Papa answer in SO

更新
JS 文件示例

function AppMasterViewModel() {
    var self = this;
    self.ViewModelTabOne = new ViewModelTabOne();
    self.ViewModelTabTwo = new ViewModelTabTwo();
    self.ViewModelTabThree = new ViewModelTabThree();
}

对于 HTML

<div id="mycontainer">
    <!-- #mycontainer related to AppMasterViewModel-->
    <div id="tab1" data-bind="with: ViewModelTabOne">
        <!-- #tab1 related to ViewModelTabOne-->
    </div>
    <div id="tab2" data-bind="with: ViewModelTabTwo">
        <!-- #tab1 related to ViewModelTabTwo-->
    </div>
    <div id="tab3" data-bind="with: ViewModelTabThree">
        <!-- #tab1 related to ViewModelTabThree-->
    </div>
</div>