jquery - 多个绑定(bind)(将绑定(bind)添加到已绑定(bind)的父 View 中的分部 View )

Question

如何将绑定(bind)应用到已经绑定(bind)的父 View 中的局部 View ？ 或者找到解决方法来克服上述需求...

我正在使用 asp.net 并且我有一个主视图，它正在使用 knockout 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);

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

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

在这种情况下，绑定(bind)发生了两次(第一次调用 ViewModelA 绑定(bind)时，第二次是在插入具有自己的绑定(bind)人员的局部 View 时)。这会产生一个错误:“您不能将绑定(bind)多次应用于同一元素”。

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

Answer 1

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

我认为您需要构建模型以将其分为四个模型(根据四个选项卡)。但是您的模型实际上是一个模型，因此您需要将它们作为一个模型(这是棘手的部分)。

我们现在研究的是knockout multiple view models on one page ？？

在我的应用程序中，我声明了一个 Master/Big/Parent/Container ViewModel，它的全部用途是让我的页面中的每个 View 模型都具有属性(记住四个模型)。

所以现在我页面的每个部分/选项卡都有自己的 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>