Bubbling action event with custom Object from component to controller using Morris.js graph in Ember component

Question

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?

Levi McCallum Levi McCallum · Accepted Answer · 2014-04-21T00:13:36

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.

Bubbling action event with custom Object from component to controller using Morris.js graph in Ember component

1 Answers