Question

如何将绑定应用于已经限定的父视图中的partialview？或者找到解决方法，解决如何克服上述问题......

我正在使用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 / tabs（在#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>

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

1 个答案: