我正在实现一个基本的Ember组件,它将渲染Morris.js折线图。我需要收听morris上的点击事件,并将其传递给动作。
App.ProgressGraphComponent = Ember.Component.extend(
{
graph: null,
tagName: 'div',
renderGraph: function()
{
this.graph.setData(this.get('progress'));
}.observes('progress'),
didInsertElement: function()
{
var element = this.get('element').id;
var self = this;
this.graph = new Morris.Line(
{
element: element,
xkey: 'date',
ykeys: ['amount', 'increase'],
labels: ['Amount', 'increase'],
resize: true,
smooth: false,
parseTime:false
}).on('click', function(i, row){
self.set('clicked', row);
self.sendAction('goToSession');
});
}
});
在我的控制器中,当goToSession
事件被触发时,它在component
对象中传递。我更希望它只是传入row
对象。
这是用row
参数使action
冒泡的正确方法吗?
发送带有操作本身的行对象可能更可取。Ember.js组件允许发送包含参数的操作。例如:
this.sendAction('goToSession', row);
这转化为动作中的类似内容(存在于控制器或路线中):
actions: {
goToSession: function(row) {
// manipulate morris row
}
}
有关在组件外发送操作的更多信息,请参阅Ember.js组件指南。