Question

我有很多时间用多个viewModel组织我的JS文件。虽然已经阅读并尝试了所有可能的技巧，但它仍然是一个完整的混乱，我不断收到多次绑定错误。

这是我的情况：我有3个视图模型。其中2个在加载时发出ajax请求。我还添加了stopBinding处理程序，以便我可以在同一页面中绑定多个viewModel。它有点......有效。我还想找到一种在viewModels之间共享函数的方法。特别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>

我真的不需要viewModelTwo（user.json数据）加载初始加载，就在我点击特定链接时，所以我需要的唯一数据就是viewModelOne（getdeployments.json数据）。
我想在viewModels
出于某种奇怪的原因，如果我ko.applyBindings(viewModelOne)将此viewModel绑定到整个文档并删除周围的<div id="deployments-section"></div>，则会中断。它只能按我上面发布的方式工作。
我在这里收到有关多个绑定的错误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，它在中等规模的淘汰网络应用程序上非常好地支持我。

KnockoutJS：帮我组织多个viewModel

1 个答案: