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

Question

In a video tutorial on the Knockout.js homepage, the presenter sets up a simple example in which the ViewModel contains an observableArray property containing instances of a custom object (a "friend" object, in this case):

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

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

ko.applyBindings(viewModel);

This is then rendered using a KO template:

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

It seems odd to me that the logic for removing a friend object (the Model?) from the ViewModel's friends collection is implemented in the friend object itself. Doesn't this create an undesirable coupling between the friend object and the ViewModel instance? Is there a more consistent design approach that would allow the removeFriend functionality to be defined in the ViewModel rather than in the friend object?

Answer 1

A more common pattern would be to put a removeFriend function one level higher and the bind to it using:

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

When Knockout calls the handler from the click or event binding it will pass the current data item as the first argument. It will also set the context ( this ) equal to the current data as well. Depending on your structure, you may have to bind the function to ensure that it is called with the appropriate context or use a strategy like var self = this; .

Since, viewModel is an object literal, in this case removeFriend could look like:

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