![](/img/trans.png)
[英]How do I get the height of a DOM element once the page has loaded in a Backbone / Marionette application?
[英]How to create DOM-dependent element in 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'],
});
}
視圖和控制器:
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中創建圖表。 嘗試在視圖的onShow
函數中創建圖表:
var PromoView = Marionette.ItemView.extend({
// code...
onShow: function(){
// create chart here
}
});
視圖中的onDomRefresh函數可能就是您想要的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.