javascript - 如何在没有全局 viewModel 的情况下将点击处理程序绑定(bind)到 knockoutjs 中的模板？

Question

我是 KnockoutJs 的新手，所以我希望有一个众所周知的最佳实践来解决我一直找不到的这种情况。

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

<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 运行的环境，我无法向全局命名空间添加任何内容，因此无法使用匿名函数来创建和设置 View 模型。 (有一个命名空间，如果需要，我可以向其中添加内容。)这个限制似乎打破了我发现的所有示例，这些示例似乎依赖于全局 viewModel 变量。

附言如果有比我正在尝试做的更适合 knockoutJS 的方法，请随时提出建议!

Answer 1

当您的 viewModel 不可全局访问时，有几个选项。

首先，您可以使用 templateOptions 参数将任何相关方法传递给模板绑定(bind)。

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

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

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

因此，您可以像这样绑定(bind)它:

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

另一种选择是在每个项目上放置一个方法和对 View 模型中任何相关内容的引用。看起来您正在探索该选项。

最后，在 KO 1.3 中(希望在 9 月发布并很快进入 beta 版)将有一个很好的方法来使用类似 jQuery 的实时/委托(delegate)功能并将其与您的 viewModel 连接(如本示例中:http://jsfiddle.net/rniemeyer/5wAYY/)

此外，此 post 的“避免事件绑定(bind)中的匿名函数”部分也可能对你有帮助。如果您正在寻找使用动态选择的模板进行就地编辑的示例，那么这个 post可能有帮助。