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

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

本文关键字：组件 对象 控制器 事件 自定义 气泡 Morris Ember js 使用      更新时间：2023-09-26

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

在我的控制器中，当goToSession事件被触发时，它在component对象中传递。我更希望它只是传入row对象。

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

发送带有操作本身的行对象可能更可取。Ember.js组件允许发送包含参数的操作。例如：

this.sendAction('goToSession', row);

这转化为动作中的类似内容（存在于控制器或路线中）：

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

有关在组件外发送操作的更多信息，请参阅Ember.js组件指南。

相关文章：