Question

我试图使用非常静态的起始数据集绑定到主干集合。在下面的代码中，我创建了我的模型，给它一个初始化函数，并为名为dataArray的属性创建一个起始数据集。

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

当我尝试从视图（通过render函数）访问集合中的模型时，Chrome的调试器告诉我，模型中没有模型采集。

试着动态学习Backbone所以任何提示/提示/建议将不胜感激。

模型

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);
});

Answer 1

你使用不执行任何操作的函数获取overriding个集合，backbone默认提取本身调用sync来获取集合。这不会发生在你的代码中导致没有模型在集合

所以试试这个：

var DataSeries = Backbone.Collection.extend({

        model: new DataPoint(),

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

    });

Answer 2

你似乎对Colllection的工作方式感到有些困惑。该集合的model属性根本不属于Model 实例：它被设计为Model 类。所以，这一行：

model: new DataPoint(),

应该是：

model: DataPoint

这可能是导致您出现问题的原因。当您fetch Collection Backbone使用model属性来实例化集合的每个新成员时。换句话说，如果你的提取返回：

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

Collection将执行以下操作（基本上;详细信息不完全相同，但这足够用于解释目的）：

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

但是当你的model是DataPoint个实例时，Backbone正在做的是：

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

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

此外，您似乎对models的{{1}}属性感到有些困惑。你有这个：

Collection

但var data = this.collection.models.attributes.dataArray;的{{1}}属性是models个实例的数组，而不是Collection本身，因此它没有Model属性。 Model中的每个attributes个实例都有Model属性，您可以使用Collection attributes方法访问它：

Collection

P.S。最后一件事：您的invoke var data = this.collection.invoke('toJSON');未定义DataSeries（或Collection）属性，这意味着您的url将无效，因为Backbone不知道从哪里获取数据。 urlRoot属性应设置为fetch，返回1 +模型的JSON。

无法将模型绑定到集合

2 个答案: