如何强制骨干.js不删除"默认"值的同级？

Question

这个问题很难用语言描述，所以如果需要澄清，请告诉我。我对骨干.js很陌生，所以这可能是一个愚蠢的问题。

我想使用骨干轻松创建图形（高图表库）。我想在模型中的"默认"对象中保留一个具有所有常见高图表设置的大量 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 对象。如何让它保留存储在那里的所有内容（背景颜色等），除了我要替换的值？

提前致谢K

Answer 1

如果你有一个模型的平面表示，一个非常简单的方法就是沿着这些思路，你可以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
    };
});

但是，由于模型的深度嵌套而不是平面表示，因此您必须执行一些额外的魔术来仅替换嵌套对象中的单个键/值对，因为如果您决定扩展它，则会覆盖整个对象如上例所示。

值得庆幸的是，jQuery的extend方法，而不是下划线.js的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!
    }
});

Answer 2

您可以使用 initialize 函数来执行一些自定义数据处理。

myModel = Backbone.Model.extends({
initialize: function(myObject){
// do some stuff with myObject
}
});