1

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>

friendViewModel のfriendsコレクションからオブジェクト (Model?) を削除するロジックがfriendオブジェクト自体に実装されているのは奇妙に思えます。friendこれにより、オブジェクトと ViewModel インスタンスの間に望ましくない結合が生じませんか? removeFriendオブジェクトではなくViewModelで機能を定義できる、より一貫した設計アプローチはありfriendますか?

4

1 に答える 1

3

より一般的なパターンは、removeFriend関数を 1 レベル上に配置し、次を使用してバインドすることです。

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

Knockout がclickoreventバインディングからハンドラーを呼び出すと、現在のデータ項目が最初の引数として渡されます。また、コンテキスト ( this) も現在のデータに等しく設定されます。構造によってはbind、関数が適切なコンテキストで呼び出されるようにするか、 のような戦略を使用する必要がある場合がありますvar self = this;。

viewModelはオブジェクト リテラルであるため、この場合はremoveFriend次のようになります。

friends: ko.observableArray(),
removeFriend: function(friend) {
    viewModel.friends.remove(friend);
}
于 2013-06-10T02:01:35.970 に答える