Question

在Knockout.js主页上的视频教程中，演示者设置了一个简单示例，其中ViewModel包含observableArray属性，其中包含自定义对象的实例（“朋友”对象，在此情况下）：

function friend(name) {
  return {
    name: ko.observable(name),
    remove: function () {
      viewModel.friends.remove(this);
    }
  };
}

var viewModel = {
  friends: ko.observableArray()
}

ko.applyBindings(viewModel);

然后使用KO模板渲染：

<script id="friendsTemplate" type="text/html">
  <li>
    <input data-bind="value: name" />
    <button data-bind="click: remove">Remove</button>
  </li>
</script>

对我来说，从ViewModel的friend集合中删除friends对象（Model？）的逻辑在friend对象本身中实现似乎很奇怪。这不会在friend对象和ViewModel实例之间创建不合需要的耦合吗？是否有更一致的设计方法允许在ViewModel中而不是在removeFriend对象中定义friend功能？

Answer 1

更常见的模式是将removeFriend函数放高一级并使用以下方法绑定它：

<button data-bind="click: $parent.removeFriend">Remove</button>

当Knockout从click或event绑定调用处理程序时，它将传递当前数据项作为第一个参数。它还将上下文（this）设置为等于当前数据。根据您的结构，您可能需要bind函数来确保使用适当的上下文调用它或使用var self = this;之类的策略。

因为viewModel是一个对象文字，在这种情况下removeFriend可能是这样的：

friends: ko.observableArray(),
removeFriend: function(friend) {
    viewModel.friends.remove(friend);
}

Knockout.js：从模型中分离ViewModel逻辑

1 个答案: