Javascript 如何在主干木偶中创建依赖DOM的元素?
在我的主干+木偶应用程序中,我使用了morris.js折线图。 此图表从模型中获取一组数据。并且必须在创建DOM之后创建(依赖于DOM) Сode创建图表:Javascript 如何在主干木偶中创建依赖DOM的元素?,javascript,backbone.js,marionette,morris.js,Javascript,Backbone.js,Marionette,Morris.js,在我的主干+木偶应用程序中,我使用了morris.js折线图。 此图表从模型中获取一组数据。并且必须在创建DOM之后创建(依赖于DOM) Сode创建图表: _createChartData: function () { var trends = this.model.get("trends"), chartData = []; $.each(trends, function (x, y) { // some actions with data
_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);
}
});
});
我试图在视图中创建此图表,但出现错误-数据为空或DOM中没有图表元素。
在视图或控制器中的何处创建此图表?使用哪个事件?初始化、onShow或onRender?当图表使用的元素还不在DOM中时,您似乎正在创建图表。尝试在视图的
onShow
功能中创建图表:
var PromoView = Marionette.ItemView.extend({
// code...
onShow: function(){
// create chart here
}
});
视图中的onDomRefresh功能可能就是您想要的功能。谢谢您的回答!但是木偶没有这种方法。仅限onbeforeRender和onRender。