如何在没有全局viewModel的情况下将click处理程序绑定到knockoutjs中的模板？

Question

我对KnockoutJs很新,所以我希望这种情况有一个众所周知的最佳实践,我一直无法找到.

我有一个包含一系列项目的视图模型.我想使用模板显示这些项目.我还希望每个项目都能够在视图和编辑模式之间切换.我认为最适合Knockout的是在主视图模型上创建相关函数,或者(可能更好)在数组中的每个项目上创建相关函数,然后在模板中绑定此函数.所以我在我的页面上创建了这个代码:

<ul data-bind="template: {name: testTemplate, foreach: items}"></ul>

<script id="testTemplate" type="text/x-jquery-tmpl">
  <li>
    <img src="icon.png" data-bind="click: displayEditView"  />
    <span data-bind="text: GBPAmount"></span>
    <input type="text" data-bind="value: GBPAmount" />
  </li>
</script>

<script>
(function() {
  var viewModel = new TestViewModel(myItems);
  ko.applyBindings(viewModel);
})();
</script>

这是一个单独的文件:

function TestViewModel(itemsJson) {

  this.items = ko.mapping.fromJS(itemsJson);

  for(i = 0; i < this.items.length; ++i) {
    this.items[i].displayEditView = function () {
      alert("payment function called");
    }
  }

  this.displayEditView = function () {
    alert("viewmodel function called");
  }
};

由于我运行的JS环境,我无法向全局命名空间添加任何内容,因此创建和设置视图模型的匿名函数.(如果有必要,我可以添加一些命名空间.)这个限制似乎打破了我发现的所有示例,它们似乎依赖于全局的viewModel变量.

PS如果有一种方法比我想做的更适合knockoutJS,请随时提出建议!

Answer 1

当您的viewModel无法全局访问时,有几个选项.

首先,您可以使用templateOptions参数将任何相关方法传递给模板绑定.

它看起来像(还要注意静态模板名称应该在引号中):

data-bind="template: {name: 'testTemplate', foreach: items, templateOptions: { vmMethod: methodFromMainViewModel } }"

然后,模板内部vmMethod将可用$item.vmMethod.如果您使用templateOptions作为最后一个参数,那么请确保大括号之间有空格{ {或jQuery模板尝试将其解析为自己的空格.

所以,你可以绑定到它:

<img src="icon.png" data-bind="click: $item.vmMethod"  />

另一种选择是在每个项目上为视图模型中的任何相关内容添加方法和引用.看起来你正在探索这个选项.

最后,在KO 1.3中(希望在九月和测试版即将推出)中,将有一种很好的方式来使用jQuery的live/delegate功能并将其与viewModel连接(如下例所示:http://jsfiddle.net/ rniemeyer/5wAYY /)

此外,这种的"事件绑定避免匿名函数"部分后可能会有所帮助你.如果您正在寻找使用动态选择的模板进行编辑的示例,那么这篇文章可能有所帮助.