如何使用Ember.js的动作Helper传递参数?

时间:2012-02-07 16:52:52

标签: javascript ember.js handlebars.js

我有一个项目列表:

  <ul>
    {{#each applications}}
      <li>
        <a {{bindAttr href="url"}} 
        {{action "appClicked" on="click"}}>                
           {{name}}
        </a>
      </li>
    {{/each}}
  </ul>

单击它会调用此模板所属的视图的方法appClicked。我想将一些信息(例如,应用程序的名称)传递给方法appClicked。像{{action "appClicked(name)" on="click"}}这样的东西。

有可能,怎么样?

6 个答案:

答案 0 :(得分:16)

显然,Ember现在已经进化,并且有能力将参数传递给动作:

{{action "functionName" parameter}}

在你的情况下,那将是:

<a {{bindAttr href="url"}} 
   {{action "appClicked" name on='click'}}>                
       {{name}}
   </a>

但是,您可以传递模型中的任何属性(如id)而不是名称。

有关详细信息,请参阅http://emberjs.com/guides/templates/actions/

答案 1 :(得分:14)

The API says您可以传递多个参数。

html和把手:

{{officename}} 
<button {{action "actionTest" "hello" "goodbye" officename}}>See parameters through action in the console</button>

控制器:

actionTest: function(a, b, c){
   console.log(a);
   console.log(b);
   console.log(c);
},

See it in action in this jsbin

答案 2 :(得分:5)

我正在考虑更多这方面的内容,因为您可以通过实际视图访问更多内容。但扎克,如果你能解释一下,如果这不是你想要的,那么你究竟想要做些什么呢?

http://jsfiddle.net/ud3323/4ysxQ/

答案 3 :(得分:1)

从子视图中,您可以附加数据属性并在控制器中访问它们。

例如,在您看来,如果您有:

{{#view Ember.Button target="App.controller" action="publish" data-publish=false}}Unpublish{{/view}}

然后在你的控制器中,

App.controller = Ember.Object.extend({
  publish: function(v){
    var status = v['data-publish'];//your additional information is appended to the view.
  }
}

答案 4 :(得分:0)

对Veeb答案的改进,记住你有jQuery事件,所以你可以这样做:

// template
<ul>
  {{#each applications}}
    <li>
      <a {{bindAttr href="url"}} param="abc" {{action "appClicked" on="click"}}>
         {{name}}
      </a>
    </li>
  {{/each}}
</ul>

// In your js code
appClicked: function (event) {
    var param = $(event.target).attr('param');
    ...
}

答案 5 :(得分:-2)

您可以尝试将参数设为&lt; li&gt;的属性。或者&lt; a&gt;标记,然后使用jQuery访问它。

也许像

// template
<ul>
  {{#each applications}}
    <li>
      <a {{bindAttr href="url"} param="abc"} 
      {{action "appClicked" on="click"}}>                
         {{name}}
      </a>
    </li>
  {{/each}}
</ul>

// In your js code
appClicked: function (event) {
    // You may have to play around and check which DOM element
    // has the the param attribute. From memory it is the parent.
    var param = this.$().parent().attr('param');
    ...
}