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 example

Answer 2

Action in handlebars template not firing

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

在把手#each循环中确定动作助手的范围

2 个答案: