2

{{#each}}ブロック内のスコープについて混乱しました。

ハンドルバースクリプトがある場合

<script type="text/x-handlebars">
      {{#each vars}}
      <button {{action foo}}> {{name}} </button>
      {{/each}}
</script>

アプリケーションコントローラーを次のように設定します

App.ApplicationController = Ember.Controller.extend({
    vars: Ember.ArrayController.create({
        content: [
            {   name: "Cow",
                foo: function(){console.log("moo");}
            },
            {   name: "Cat",
                foo: function(){console.log("meow");}
            }
        ]
    })
});

スクリプトは問題なく表示され、期待どおりにボタンのタイトルとして挿入されますが、アクションは配列メンバー内で定義された関数{{name}}にバインドされません。 foo

私が見逃しているこれを行う方法はありますか、それともfoo内部で直接定義されるようにリファクタリングする必要がありますApplicationControllerか？

4

2 に答える 2

1

イベントを設定しApplicationControllerて個々のオブジェクトを渡し、保存されているを呼び出すことができますfoo()。ブロック内では、実際のオブジェクトをイベントハンドラーに渡すために{{#each vars}}...{{/each}}使用できます。this

JS：

App.ApplicationController = Ember.Controller.extend({
    vars: Ember.ArrayController.create({
        content: [
            {   name: "Cow",
                foo: function(){console.log("moo");}
            },
            {   name: "Cat",
                foo: function(){console.log("meow");}
            }
        ]
    }),
  doFoo: function(obj) {
    obj.foo();
  }
});

ハンドルバー：

{{#each vars}}
      <button {{action doFoo this}}> {{name}} </button>
{{/each}}

JSBinの例

于 2013-02-01T19:53:55.087 に答える
0

ハンドルバーテンプレートのアクションが起動しない

これはルート要素が原因である可能性があります。詳細については、この投稿を確認してください

于 2013-01-31T23:02:54.107 に答える