[英]How to pass parameters with the action Helper of Ember.js?
I have a list of items: 我有一个项目列表:
<ul>
{{#each applications}}
<li>
<a {{bindAttr href="url"}}
{{action "appClicked" on="click"}}>
{{name}}
</a>
</li>
{{/each}}
</ul>
On click it calls the method appClicked
of the view, that this template belongs to. 点击它会调用此模板所属的视图方法appClicked
。 I want to pass some information (for example, the name of the application) to the method appClicked
. 我想将一些信息(例如,应用程序的名称)传递给appClicked
方法。 Something like, {{action "appClicked(name)" on="click"}}
. 类似于{{action "appClicked(name)" on="click"}}
。
Is it possible, and how? 有可能,怎么样?
Apparently, Ember has evolved now and there is an ability to pass a parameter to an action: 显然,Ember现在已经发展,并且有能力将参数传递给动作:
{{action "functionName" parameter}}
In your case, that would be: 在你的情况下,那将是:
<a {{bindAttr href="url"}}
{{action "appClicked" name on='click'}}>
{{name}}
</a>
However, you could pass any attribute from the model (like the id) instead of the name. 但是,您可以从模型中传递任何属性(如id)而不是名称。
See http://emberjs.com/guides/templates/actions/ for more information. 有关更多信息,请参见http://emberjs.com/guides/templates/actions/ 。
The API says you can pass in multiple parameters. API表示您可以传递多个参数。
html and handlebars: HTML和把手:
{{officename}}
<button {{action "actionTest" "hello" "goodbye" officename}}>See parameters through action in the console</button>
controller: 控制器:
actionTest: function(a, b, c){
console.log(a);
console.log(b);
console.log(c);
},
I was thinking something more along the lines of this since you'll have access to a bunch more through an actual view. 我正在考虑更多这方面的内容,因为你可以通过实际视图访问更多内容。 But Zack, if you could explain a bit more what exactly you're trying to do if this isn't what you're looking for? 但扎克,如果你能解释一下,如果这不是你想要的东西,你究竟要做什么呢?
App = Ember.Application.create(); App.peopleController = Ember.ArrayController.create({ content: [ { name: 'Roy', url: '#' }, { name: 'Mike', url: '#' }, { name: 'Lucy', url: '#' } ] }); App.PersonView = Ember.View.extend({ tagName: 'li', content: null, linkClicked: function() { console.log(this.getPath('content.name')); } });
<ul> {{#each App.peopleController}} {{#view App.PersonView contentBinding="this"}} <a {{bindAttr href="content.url"}} {{action "linkClicked" on="click"}}> {{content.name}} </a> {{/view}} {{/each}} </ul>
From subviews, you can attach data-attributes and access them in your controller. 从子视图中,您可以附加数据属性并在控制器中访问它们。
For example, in your view, if you have: 例如,在您的视图中,如果您有:
{{#view Ember.Button target="App.controller" action="publish" data-publish=false}}Unpublish{{/view}}
Then in your controller, 然后在你的控制器中,
App.controller = Ember.Object.extend({
publish: function(v){
var status = v['data-publish'];//your additional information is appended to the view.
}
}
An improvement to Veeb's answer, remember you have the jQuery event so you can do: 对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');
...
}
You can try to make the parameter an attribute of the <li> or <a> tag and then use jQuery to access it. 您可以尝试将参数设为<li>或<a>标签的属性,然后使用jQuery访问它。
Maybe something like 也许是这样的
// 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');
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.