如何在 Backbone Marionette 中创建依赖于 DOM 的元素？答案

【问题标题】：How to create DOM-dependent element in Backbone Marionette?如何在 Backbone Marionette 中创建依赖于 DOM 的元素？
【发布时间】：2013-11-01 11:03:17
【问题描述】：

在我的骨干+木偶应用程序中，我使用了 morris.js 折线图。此图表从模型中获取一组数据。并且必须在 DOM 创建后创建（DOM 依赖）。

创建图表的代码：

_createChartData: function () {
    var trends = this.model.get("trends"),
        chartData = [];

    $.each(trends, function (x, y) {
        // some actions with data
    });

    return chartData;
},
_createChart: function () {      
    Morris.Line({
        element: 'promo-chart',
        data: this._createChartData(),
        xkey: 'date',
        ykeys: ['y', 'g'],
    });
}

视图和控制器：

define(['utils/hbs', 'modules/model/promo-mdl'], function( Hbs, Promo){
    var PromoView = Marionette.ItemView.extend({
        initialize: function () {
            this._events();
        },

        template: Hbs.tf('modules/promo'),

        templateHelpers: {
            // handlebars helpers
        },

        events: {
            'click #submitBtn'          : '_savePromo',
        },

        _events: function () {
            this.listenTo(this.model, 'change', this.render);
        },

        _savePromo: function () {
            // save data
        }        
    });

    return Marionette.Controller.extend({
        initialize: function (config) {
            this.region = config.region;
            this.model = new Promo({});
            this.model.fetch();
            this._events();
        },

        _events: function () {
            App.vent.on('show:promo', this._show, this);
        },

        _show: function () {
            this.view = new PromoView({ model: this.model });
            this.region.show(this.view);
        }
    });
});

我尝试在 View 中创建此图表，但出现错误 - 空数据或 DOM 中没有图表元素。在哪里创建这个图表，在视图或控制器中？以及使用哪个事件？初始化、onShow 还是 onRender？

【问题讨论】：

标签： javascript backbone.js marionette morris.js

【解决方案1】：

当图表使用的元素不在 DOM 中时，您似乎正在创建图表。尝试在视图的onShow 函数中创建图表：

var PromoView = Marionette.ItemView.extend({

    // code...

    onShow: function(){
      // create chart here
    }
});

【讨论】：

感谢您的回答！但是木偶没有这个方法。只有 onbeforeRender 和 onRender Marionette.ItemView.

【解决方案2】：

视图中的 onDomRefresh 函数可能是您要查找的。p>

【讨论】：