2

私のバックボーン + マリオネット アプリケーションでは、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?

4

2 に答える 2

1

使用する要素がまだDOMにないときにチャートを作成しているようです。ビューのonShow関数でチャートを作成してみてください:

var PromoView = Marionette.ItemView.extend({

    // code...

    onShow: function(){
      // create chart here
    }
});
于 2013-11-01T12:31:58.440 に答える
0

ビューの onDomRefresh 関数は、探しているものである可能性があります。

于 2013-11-03T11:04:46.740 に答える