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

Question

我正在用多个视图模型组织我的 JS 文件。这完全是一团糟，尽管我已经阅读并尝试了所有可能的技巧，但我仍然多次收到有关绑定的错误。

这是我的情况：我有 3 个视图模型。其中 2 个在加载时发出 ajax 请求。我还添加了stopBinding 处理程序，因此我可以在同一页面中绑定多个视图模型。它工作......有点。我还想找到一种在视图模型之间共享功能的方法。 isDirty() 特别是（此处描述：http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html）

我的文件很大，所以我将发布一个示例。一切都按照http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html实现了

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>

1. 我真的不需要 viewModelTwo（user.json 数据）在初始加载时加载，就在我点击特定链接时，所以我需要的唯一数据是 viewModelOne（ getdeployments.json 数据）。

2. 我想在viewModels之间共享一些功能

1234563它只适用于我在上面发布的方式。

3. 我在ko.applyBindings(viewModelOne, $('#users-section')[0]) 处收到关于多个绑定的错误。添加ko.cleanNode($('#users-section')) 没有帮助。我只从这个特定的绑定中得到错误，而不是其他两个。

我想我愿意将所有内容整合到一个 viewModel 中，如果那是更好的方法

Answer 1

如何摆脱 stopBinding 并回到基本。

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>

  <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>

如果您想要一些框架级别的支持，除了 durandaljs（我从未尝试过）之外，还有一个较小的 http://pagerjs.com 可以很好地支持我在中等规模的淘汰赛 Web 应用程序上。