0

この質問を言葉で説明するのは非常に難しいので、明確にする必要がある場合はお知らせください。私はbackbone.jsを初めて使用するので、ばかげた質問かもしれません。

バックボーンを使用してグラフを簡単に作成したい（highchartsライブラリ）。モデルの「defaults」オブジェクトにすべての一般的なhighcharts設定を含む大規模なjsonオブジェクトを保持したいと思います。次に、いくつかの変数をオーバーライドしたいと思います。たとえば、チャートをレンダリングする必要があるdom要素の名前を含む変数です。

これが私のコードです：

var app = {
    Views:{},
    Models:{},
    Collections:{},
    init:function(){
        new app.Views.PageView();
    }
};

$().ready(_.bind(app.init,app));

 app.Models.chart = Backbone.Model.extend({
    defaults:{
        chart:{
           renderTo:'charts',
           backgroundColor:'#e1e1e1',
           height:200,
           width:200,
           defaultSeriesType:'spline',
           spacingRight:40,
           animation:false
        },
        colors:['#000', '#AA4643'],
        title:{
           text:''
        },
//lots lots lots of other attributes defined here.

app.Views.ChartView = Backbone.View.extend({
    render : function() {
        var chartContainer = this.model.attributes.chart.renderTo;
        $('#charts').append("<div id="+chartContainer+"></div>");

        new Highcharts.Chart(this.model.toJSON());
        return this;
    }
});

var chartDetails = [{chart:{renderTo:'div1'}},{chart:{renderTo:'div2'}}];

app.Views.PageView = Backbone.View.extend({
    el: $("#charts"),

    initialize : function(){
        this.chartCollection = new app.Collections.Charts(chartDetails);
        this.render();
    },

    render: function(){
        var that = this;
        _.each(this.chartCollection.models, function(item){
            that.renderChart(item);
        })
    },

    renderChart : function (item) {
        var chartView = new app.Views.ChartView({
            model: item
        });
        chartView.render();
    }
});

したがって、ここでの本当の質問は、新しいコレクションを定義するときに、モデルで指定された「デフォルト」をオーバーライドする「chartDetails」オブジェクトを提供することです。したがって、defaults.charts.renderToプロパティを更新するのではなく、完全なdefaults.chartsオブジェクトを置き換えます。置き換えたい値を除いて、そこに保存されているもの（backgroundColorなど）をすべて保持するようにするにはどうすればよいですか？

よろしくお願いしますk

4

2 に答える 2

2

モデルのフラットな表現がある場合、非常に単純なアプローチはdefaults、関数として定義できるように、これらの線に沿ったものになります。

app.Models.Chart = Backbone.Model.extend(
{
    // we're using constructor to set this.options 
    //  as defaults gets called before initialize
    constructor: function (attrs, options)
    {
        this.attrs = attrs;
        Backbone.Model.prototype.constructor.apply(this, arguments)
    },
    // defaults can be defined as a function, yeah!
    defaults: function ()
    {
        var defaults = {
            renderTo: 'charts',
            backgroundColor: '#e1e1e1',
            height: 200,
            width: 200,
            defaultSeriesType: 'spline',
            spacingRight: 40,
            animation: false
        };
        return _.extend({}, defaults, this.attrs);
    }
});

ブートストラップを一度に結び付けていないため、このような実装よりもこの実装の方が好きです。これにより、実際には不要なイベントがトリガーされる可能性があります。

app.Models.Chart = Backbone.Model.extend(
{
    initialize: function (attrs, options)
    {
        // this might trigger events, even if you make it {silent: true}
        // and is why I prefer the above implementation instead
        this.set(attrs); 
    },
    defaults: {
        renderTo: 'charts',
        backgroundColor: '#e1e1e1',
        height: 200,
        width: 200,
        defaultSeriesType: 'spline',
        spacingRight: 40,
        animation: false
    };
});

ただし、モデルのフラットな表現ではなく、深くネストされているため、オブジェクト全体を拡張する場合はオブジェクト全体を上書きするため、ネストされたオブジェクト内の個々のキーと値のペアのみを置き換えるために、追加の魔法を実行する必要があります。上記の例のように。

ありがたいことextendに、underscore.jsのメソッドとは対照的に、jQueryのメソッドは、これを実行できるようにパラメーターextendを提供します。deep

app.Models.Chart = Backbone.Model.extend(
{
    // we're using constructor to set this.options 
    //  as defaults gets called before initialize
    constructor: function (attrs, options)
    {
        this.attrs = attrs;
        Backbone.Model.prototype.constructor.apply(this, arguments)
    },
    // defaults can be defined as a function, yeah!
    defaults: function ()
    {
        var defaults = {
            renderTo: 'charts',
            backgroundColor: '#e1e1e1',
            height: 200,
            width: 200,
            defaultSeriesType: 'spline',
            spacingRight: 40,
            animation: false
        };
        return $.extend(true, {}, defaults, this.attrs); // thank you jQuery!
    }
});
于 2012-05-25T09:00:01.113 に答える
0

初期化関数を使用して、カスタムデータ処理を行うことができます。

myModel = Backbone.Model.extends({
initialize: function(myObject){
// do some stuff with myObject
}
});
于 2012-05-25T08:36:27.057 に答える