I'm implementing a basic Ember Component which will render a Morris.js line graph. I need to listen to the click event on morris and pass it to the action.
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');
});
}
});
In my controller, when the goToSession
event is triggered, it passes in the component
object. I'd prefer it if it just passed in the row
object.
Is this the correct way to bubble the action
up with the row
parameter?
It might be more preferable to send the row object with the action itself. Ember.js components allow sending actions with arguments included. For example:
this.sendAction('goToSession', row);
Which translates to something like this in the action (that either exists in the controller or route):
actions: {
goToSession: function(row) {
// manipulate morris row
}
}
Learn more about sending actions outside of a component in the Ember.js components guide .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.