使用Ember組件中的Morris.js圖從組件到控制器的自定義對象冒泡操作事件

Question

我正在實現一個基本的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對象，我會更喜歡它。

這是用row參數使action冒泡的正確方法嗎？

Answer 1

最好將行對象與操作一起發送。 Ember.js組件允許發送包含參數的動作。 例如：

this.sendAction('goToSession', row);

在動作中（控制器或路由中存在），它會轉換為以下形式：

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

在Ember.js組件指南中了解有關在組件外部發送動作的更多信息。