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

【问题标题】：Knockout.js: Separating ViewModel logic from the ModelKnockout.js：从模型中分离 ViewModel 逻辑
【发布时间】：2013-06-05 13:24:54
【问题描述】：

在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 的 friends 集合中删除 friend 对象（模型？）的逻辑是在 friend 对象本身中实现的。这不会在friend 对象和 ViewModel 实例之间产生不良耦合吗？是否有更一致的设计方法允许在 ViewModel 中而不是在 friend 对象中定义 removeFriend 功能？

【问题讨论】：

标签： javascript mvvm knockout.js viewmodel

【解决方案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);
}

【讨论】：

我更喜欢这样。感谢您的回答。