javascript - RequireJS with Knockout - 多次应用绑定(bind)

Question

我正在尝试使用 RequireJS 简化我们对 KnockoutJS 组件的开发。问题是它说我对同一个元素多次应用绑定(bind)。

require-config.js

var require = {
  baseUrl: ".",
  paths: {
    "bootstrap": "bower_components/bootstrap/dist/js/bootstrap.min",
    "jquery": "bower_components/jquery/dist/jquery.min",
    "knockout": "bower_components/knockout/dist/knockout",
    "text": "bower_components/text/text"
  },
  shim:{
    "bootstrap": {deps: ["jquery"]}
  }
}

ma​​in.js

define(["jquery", "knockout", "bootstrap"], function($, ko){
    ko.components.register("sel-text", { require: "components/selecttextarea/selecttextarea" });
    ko.applyBindings({});
});

selecttextarea.js -(我创建的组件)

define(["knockout", "text!./selecttextarea.html"], function(ko, template){
  function SelTextareaViewModel(params){
     var self = this;
     self.items = ko.observableArray(params.items);
     self.caption = ko.observable();
  }

  return{ viewModel: SelTextareaViewModel, template: template};
});

尝试使用组件

index.html

  <div class="row" id="asd">
       <pre data-bind="text: ko.toJSON($root.selectItems)"></pre>
       <sel-text params="items: $root.selectItems"></sel-text>
  </div>

      ...

<script>
require(['js/page1']);
</script>

page1.js

require(["jquery", "knockout"], function($, ko){

  var data = [{"val": 0, "text": "Hello"}, {"val": 1, "text": "Bloody"}, {"val": 2, "text": "World"}];
    function SimpleViewModel(d){
      var self = this;
      self.selectItems = ko.observableArray(d);
    }
    ko.applyBindings(new SimpleViewModel(data), $('#asd')[0]);
});

如果我删除 <pre>标记它不显示错误，就像它试图将绑定(bind)应用于 $('#asd')[0] 中的每个元素一样.

我很困惑，有什么建议吗？

更新

从评论中可以清楚地看出不要在我的 main.js 中应用绑定(bind)。如果您查看 Steve Sanderson's Knockout Triage repo，这将适用于单页应用程序

我如何让它工作的是删除 applyBindings来自 main.js然后在 page1.js 中要求它们: require(["jquery", "knockout", "js/main"], function($, ko) .

理想情况下，组件将在全局范围内注册，我什至不必在页面级别考虑它们，嘿嘿。我确实有一个我昨天在工作中做的工作示例(但我忘了获取我的代码的副本)并且它运行良好。

Answer 1

如果您要对一组 knockout 组件进行标准化，我建议在模块内注册该组件。在下面的示例中，代码使用 special 'exports' dependency定义模块的返回值。这减少了在模块末尾使用 return 语句的需要。

define([
  'knockout', 
  'exports', 
  'text!/.select-text.html'
], function (ko, selectArea, template) {

   function SelectArea(params) { ... }

   selectArea.viewModel = SelectArea; 
   selectArea.template = template;

   ko.components.register('select-area', selectArea);

});

在模块中注册组件的好处是一切都是独立的并且可以记录下来。然后，如果您有很多组件，您可以创建一个简单的 all.js 模块来包含所有组件定义。例如

define([
  'components/selectArea',
  'components/selectMultiple',
  ....
 ], function () { });

然后只需在 require() 调用中包含 all.js，或者调用 ko 的 define() block .applyBindings()，所有组件都应该在调用 ko.applyBindings() 之前注册。

require([
  'knockout',
  ...
  'components/all'
], function (ko, ...) {
   ko.applyBindings(...);
}

如果您有一些特定于页面的组件，那么您可能需要改变这种模式。需要注意的一件重要事情是，尽量不要让 knockout 组件 AMD 模块产生任何副作用。它应该只定义 View 模型和模板。