我正在尝试使用非常静态的起始数据集来绑定到主干集合。在下面的代码中,我创建我的模型,为其提供初始化函数,并为名为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}))
但是当您的
model
是DataPoint
实例时,Backbone所做的是:var x = new DataPoint();
this.add(new x({a: 1}))
this.add(new x({b: 2}))
这不会导致将任何
Model
添加到您的Collection
中。另外,您似乎对
models
的Collection
属性有些困惑。你有这个:var data = this.collection.models.attributes.dataArray;
但是
models
的Collection
属性是Model
实例的数组,而不是Model
本身,因此它没有attributes
属性。但是,Model
中的每个单独的Collection
实例确实具有attributes
属性,您可以使用Collection
invoke
方法来访问它:var data = this.collection.invoke('toJSON');
附言最后一件事:您的
DataSeries
Collection
没有定义url
(或urlRoot
)属性,这意味着您的fetch
将无法工作,因为Backbone不知道从何处获取数据。 url
属性应设置为URL
,它返回1个以上模型的JSON。