2

コンテキストを変更せずに foreach バインディングを使用することは可能ですか?

たとえば、これが私のテンプレートです。

<div data-bind="foreach:{data:users,as:'user'}">
  <div data-bind="template:{name:'userAvatar',data:user}"></div>
</div>

<div data-bind="template:{name:'userAvatar',data:currentUser}"></div>

<script type="text/template" id="userAvatar">
  <img data-bind="attr:{src:avatarUrl}">
</script>

したがって、foreach ループの内側と外側でテンプレート 'userAvatar' を使用します。そして今、ユーザーがアバターをクリックしたときに何らかのアクションを実行したいと考えています。たとえば、私のモデルは

var MyModel = function() {
  this.users = [
    {name:"user1",avatarUrl:"url1"},
    {name:"user2",avatarUrl:"url2"}
  ];
  this.currentUser = {name:"user3",avatarUrl:"url3"};
  this.openProfile = function() {
    // opening user profile
  }
}

この場合、テンプレートで「openProfile」アクションを呼び出したい場合、テンプレートが foreach の外側にある場合は $parent.openProfile を使用し、テンプレートがその内側にある場合は $parents[1].openProfile を使用する必要があります。

テンプレート バインディングを呼び出すときに、openProfile へのリンクを各ユーザー オブジェクトにコピーしたり、openProfile メソッドの場所を指定したりできますが、もっと自然な解決策はありますか?

PS そして、現実の世界では $root がこれらのモデルの 10 レベル上にあるため、 $root 変数を使用できません。

4

2 に答える 2

3

私のRepeatバインディングは foreach と同様のアクションを実行しますが、子コンテキストを作成しません。

<div data-bind="repeat:users" 
    data-repeat-bind="template:{name:'userAvatar',data:$item()}"></div>

を使用しているため、例に適用される別のオプション（おそらくより良い）templateは、次のforeachオプションですtemplate。

<div data-bind="template:{name:'userAvater',foreach:users}"></div>
于 2013-02-13T21:09:46.233 に答える