javascript - 车把内动作助手的范围#each循环

Question

我对 {{#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？

Answer 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 示例

Answer 2

车把模板中的操作未触发

这可能是由于根元素，请在此处查看此帖子以获取更多信息