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

Posted 2023-02-22

【中文标题】KnockoutJS：帮我组织多个视图模型

【英文标题】：KnockoutJS: Help me organize multiple viewModels

【发布时间】：2014-05-08 11:40:55

【问题描述】：

我正在用多个视图模型组织我的 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>

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

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

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

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

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

【问题讨论】：

如果可以的话，我推荐使用 durandaljs 来管理你的视图模型。它还为您提供有关视图何时绑定、加载等的事件。durandaljs.com

@JasonHaley：谢谢你的建议。我肯定会研究它，也许会在我的下一个项目中使用它，但现在我想让它工作，而无需返回并重新编写我的一半代码。我对这个项目太深入了，无法在其中引入任何新组件。另外，我并不是真正的开发人员，只是为了让我的工作生活更轻松一些。

【参考方案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 应用程序上。

【讨论】：

做到了！非常感谢！