javascript - 使用 Ember 组件中的 Morris.js 图表，使用自定义对象从组件到 Controller 冒泡操作事件

Question

我正在实现一个基本的 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');

        });
    }

});

在我的 Controller 中，当触发 goToSession 事件时，它会传入 component 对象。如果它只是传入 row 对象，我会更喜欢它。

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

Answer 1

最好将行对象与操作本身一起发送。 Ember.js 组件允许发送包含参数的操作。例如:

this.sendAction('goToSession', row);

这在操作中转换为类似的内容(存在于 Controller 或路由中):

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

了解有关在组件外部发送操作的更多信息 Ember.js components guide .