使用Ember组件中的Morris.js图,使用自定义对象从组件到控制器冒泡操作事件

时间:2014-04-21 00:06:46

标签: javascript ember.js

我实现了一个基本的Ember组件,它将渲染一个Morris.js折线图。我需要听听morris上的click事件并将其传递给动作。

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对象,我会更喜欢它。

这是使用action参数向row冒泡的正确方法吗?

1 个答案:

答案 0 :(得分:1)

使用动作本身发送行对象可能更为可取。 Ember.js组件允许发送包含参数的动作。例如:

this.sendAction('goToSession', row);

在操作中转换为类似的东西(存在于控制器或路径中):

actions: {
  goToSession: function(row) {
    // manipulate morris row
  }
}

详细了解如何在Ember.js components guide

中的组件之外发送操作