Javascript KnockoutJS：帮助我组织多个视图模型

我在用多个viewModels组织我的JS文件时经历了一段痛苦的时光。这是一个完全混乱的局面，我多次在绑定方面出错，尽管我已经阅读并尝试了所有可能的技巧

以下是我的情况：我有3个视图模型。其中2个在加载时发出ajax请求。我还添加了

stopBinding

处理程序，以便可以在同一页面中绑定多个viewModels。它是有效的。。。有点我还想找到一种在viewModels之间共享函数的方法<代码>isDirty（）特别是（此处描述：）

我的文件非常大，因此我将发布一个示例。一切按计划执行

JS

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings.stopBinding = true;

// viewModelOne
$.getJSON('/admin/getusers.json', function(json, status) {

    var viewModelOne = ko.mapping.fromJS(json);

    // MODE CODE AND FUNCTIONS HERE. SOME OF THEM ARE 
    // THE SAME AS viewModelTwo USES

   ko.applyBindings(viewModelOne, $('#users-section')[0])

});


// viewModelTwo
$.getJSON('/admin/getdeployments.json', function(json, status) {

    var viewModelTwo = ko.mapping.fromJS(json);

    // MODE CODE AND FUNCTIONS HERE. SOME OF THEM ARE 
    // THE SAME AS viewModelOne USES

    ko.applyBindings(viewModelTwo, $('#deployments-section')[0])

});


// viewModelThree
var viewModelThree = {
    someFunction: function() {
       // SOME CODE HERE
    }

}
ko.applyBindings(viewModelThree, $('#logs-section')[0]);

HTML

<section>

    <!-- ko stopBinding: true -->
    <div id="deployments-section">
         // HTML HERE
    </div>
    <!-- /ko -->

    <!-- ko stopBinding: true -->
    <div id="users-section">
        // HTML HERE
    </div>
    <!-- /ko -->

    <!-- ko stopBinding: true -->
    <div id="logs-section">
        // HTML HERE
    </div>
    <!-- /ko -->

</section>

<section>

  <div id="deployments-section" data-bind="with: viewModelTwo">
     // HTML HERE
  </div>

  <div id="users-section" data-bind="with: viewModelOne">
    // HTML HERE
  </div>

  <div id="logs-section" data-bind="with: viewModelThree">
    // HTML HERE
  </div>

</section>

//这里是HTML
//这里是HTML
//这里是HTML

我并不真正需要在初始加载时加载

viewModelTwo

（

getdeployments.json

数据），只要我点击一个特定链接，所以我需要的唯一数据就是

viewModelOne

（

getdeployments.json

数据）

我想在viewModels之间共享一些函数

出于某种奇怪的原因，如果我执行

ko.applyBindings（viewModelOne）

将此viewModel绑定到整个文档并删除

周围的

，事情就会中断。它只适用于我上面发布的方式

我在这里得到一个关于多个绑定的错误

ko.applyBindings（viewModelOne，$（“#用户部分”）[0]）

。添加

ko.cleanNode（$（“#用户部分”）

没有帮助。我只从这一个特定的绑定中得到错误，而不是其他两个

---

我想我愿意将所有内容整合到一个单一的视图模型中，如果这是一个更好的方法

那就放弃停止绑定，回到基本视图吧

Javascript

var vm = {
    viewModelOne: ko.observable(),
    viewModelTwo: ko.observable(),
    viewModelThree: {
        someFunction: function() { /* ... */ }
    }
};

var shared_functions = {
    func1: function() { /* use "this" pointer as if it's object viewModelOne or viewModelTwo */ },
    func2: function() {}
};

ko.applyBindings(vm);

// viewModelOne
$.getJSON('/admin/getusers.json', function(json, status) {
    var viewModelOne = ko.mapping.fromJS(json);

    // MODE CODE AND FUNCTIONS HERE.

    // add shared functions too
    $.extend(viewModelOne, shared_functions);
    vm.viewModelOne(viewModelOne);
});

// viewModelTwo
$.getJSON('/admin/getdeployments.json', function(json, status) {

    var viewModelTwo = ko.mapping.fromJS(json);

    // MODE CODE AND FUNCTIONS HERE.

    // add shared functions too
    $.extend(viewModelTwo, shared_functions);
    vm.viewModelTwo(viewModelTwo);

});

HTML

<section>

    <!-- ko stopBinding: true -->
    <div id="deployments-section">
         // HTML HERE
    </div>
    <!-- /ko -->

    <!-- ko stopBinding: true -->
    <div id="users-section">
        // HTML HERE
    </div>
    <!-- /ko -->

    <!-- ko stopBinding: true -->
    <div id="logs-section">
        // HTML HERE
    </div>
    <!-- /ko -->

</section>

<section>

  <div id="deployments-section" data-bind="with: viewModelTwo">
     // HTML HERE
  </div>

  <div id="users-section" data-bind="with: viewModelOne">
    // HTML HERE
  </div>

  <div id="logs-section" data-bind="with: viewModelThree">
    // HTML HERE
  </div>

</section>

//这里是HTML
//这里是HTML
//这里是HTML

---

如果您需要一些框架级支持，除了durandaljs（我从未尝试过），还有一些较小的框架级支持，可以在中等规模的淘汰web应用程序上很好地支持我。

如果可以，我建议您使用durandaljs来管理视图模型。它还为您提供了视图绑定、加载等事件@JasonHaley:谢谢您的建议。我肯定会研究它，也许会在我的下一个项目中使用它，但现在我想让这一个工作，而不必回去重新编写我的一半代码。我对这个项目太深入了，无法在其中引入任何新组件。另外，我不是一个真正的开发人员，只是为了让我的工作生活更轻松一点，这就做到了！非常感谢你！