gpt4 book ai didi

javascript - 如何在 Backbone Marionette 中创建依赖 DOM 的元素?

转载 作者:行者123 更新时间:2023-11-30 05:42:54 24 4
gpt4 key购买 nike

在我的 backbone+marionette 应用程序中,我使用了 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'],
});
}

View 和 Controller :

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 中没有图表元素。在 View 或 Controller 中的何处创建此图表?使用哪个事件?初始化,onShow 还是 onRender?

最佳答案

当它使用的元素不在 DOM 中时,您似乎正在创建图表。尝试在 View 的 onShow 函数中创建图表:

var PromoView = Marionette.ItemView.extend({

// code...

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

关于javascript - 如何在 Backbone Marionette 中创建依赖 DOM 的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19725506/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com