我正在尝试使用非常静态的起始数据集来绑定到主干集合。在下面的代码中,我创建我的模型,为其提供初始化函数,并为名为dataArray的属性创建起始数据集。

在集合中,如果我理解正确,我会将模型分配为我刚刚创建的模型类型的单个新实例。

但是,当我尝试从视图(通过render函数)访问集合中的模型时,Chrome的调试器告诉我集合中没有模型。

尝试动态学习骨干网,因此任何提示/技巧/建议将不胜感激。

模型

var DataPoint = Backbone.Model.extend({

    initialize: function (x) {
        this.setDefaults();
    },

    defaults: {
        dataArray: ""
    },

    randomize: function () {
        $.each(dataArray, function (key, item) {
            this.contract = Math.random() * (140000 - 100000 + 1) + 100000;
        });
    },

    setDefaults: function() {
        dataArray = [{ "label": "0/7yrs", "contract": 108530.17, "annReturn": "1.20%" },
            { "label": "1/7yrs", "contract": 111830.17, "annReturn": "1.63%" },
            { "label": "2/7yrs", "contract": 115311.17, "annReturn": "2.07%" },
            { "label": "3/7yrs", "contract": 118984.65, "annReturn": "2.52%" },
            { "label": "4/7yrs", "contract": 122859.65, "annReturn": "2.98%" },
            { "label": "5/7yrs", "contract": 126947.77, "annReturn": "3.46%" },
            { "label": "6/7yrs", "contract": 131260.74, "annReturn": "3.94%" },
            { "label": "7/7yrs", "contract": 135810.92, "annReturn": "4.44%" }];
    }
});


采集

var DataSeries = Backbone.Collection.extend({

    model: new DataPoint(),

    fetch: function () {
    },

    randomize: function () {
        this.each(function (m) {
            m.randomize();
        });
    }

});


视图

var BarGraph = Backbone.View.extend({

    "el": "#graph",

    options: {barDemo: ""},

    initialize: function (options) {

        _.bindAll(this, "render", "frame");
        this.collection.bind("reset", this.render);
        this.collection.bind("change", this.render);

        this.options.barDemo = d3.selectAll($(this.el)).append("svg:svg")
            .attr("width", width)
            .attr("height", height + 60);

        this.collection.fetch();
    },

    render: function () {

        //This displays in the console as empty brackets: []
        console.log(this.collection.models);

        //This naturally throws an error saying cannot read propety of undefined
        var data = this.collection.models.attributes.dataArray;
    },

    frame: function () {
        //this.chart.append("line").attr("y1", 0).attr("y2", h - 10).style("stroke", "#000");

        //this.chart.append("line").attr("x1", 0).attr("x2", w).attr("y1", h - 10).attr("y2", h - 10).style("stroke", "#000");
    }
});


启动jQuery函数

$(function() {
    var dataSeries = new DataSeries();
    new BarGraph({
        collection: dataSeries
    }).render();

    setInterval(function () {
        Randomize();
    }, 2000);
});

最佳答案

您似乎对Colllection的工作方式有些困惑。集合的model属性根本不意味着是Model实例:它被设计为Model类。因此,此行:

model: new DataPoint(),


确实应该是:

model: DataPoint


这可能是导致您的问题的原因。当您fetch时,Collection骨干网会使用model属性来实例化集合的每个新成员。换句话说,如果您的提取返回:

[{a: 1}, {b: 2}];


Collection将执行以下操作(本质上;细节并不完全相同,但这已经足够接近以进行说明):

this.add(new DataPoint({a: 1}))
this.add(new DataPoint({b: 2}))


但是当您的modelDataPoint实例时,Backbone所做的是:

var x = new DataPoint();
this.add(new x({a: 1}))
this.add(new x({b: 2}))


这不会导致将任何Model添加到您的Collection中。

另外,您似乎对modelsCollection属性有些困惑。你有这个:

var data = this.collection.models.attributes.dataArray;


但是modelsCollection属性是Model实例的数组,而不是Model本身,因此它没有attributes属性。但是,Model中的每个单独的Collection实例确实具有attributes属性,您可以使用Collection invoke方法来访问它:

var data = this.collection.invoke('toJSON');




附言最后一件事:您的DataSeries Collection没有定义url(或urlRoot)属性,这意味着您的fetch将无法工作,因为Backbone不知道从何处获取数据。 url属性应设置为URL,它返回1个以上模型的JSON。

10-07 19:51
查看更多