Backbone.js的胶原凝集抛出错误 [英] Backbone.js collectin throw the error
问题描述
我（作为一个初学者）用我的收集做一个小的骨干功能追加我的链接，这个被分配模式，
但集合抛出错误..任何人可以纠正我的code吗？
$（函数（）{
VAR模型=新Backbone.Model（{
数据：[
{名称：'雅虎'中，href：HTTP：//www.yahoo.com}，
{名的Gmail'中，href：HTTP：//www.gmail.com}，
{名称：'兵'中，href：HTTP：//www.bing.com'}
]
}）; VAR收集=新Backbone.Collection.extend（{
型号：型号//就是要做到这一点并不正确方法是什么？
}）; VAR查看= Backbone.View.extend（{
EL：'＃集装箱'，
事件：{
点击按钮'：'渲染'
}，
初始化：功能（）{
this.collection =新集（）; //抛出错误！
this.template = $（'＃临时'）儿童（）。
}，
渲染：功能（）{
VAR数据= this.collection.get（数据）;
对于（i = 0; I＆LT; data.length;我++）{
VAR李= this.template.clone（）。找到（'A'）
.attr（'href属性，数据[I] .href）
的.text（数据由[i]。名称）.END（）;
这$ el.find（UL）追加（LI）。
}
}
}）; VAR myLink的=新景（）;}）
解决方案
模型被用于存储和管理数据的各个块
Backbone.Model.extend 来创建一个模型类与您的所有特定模型的方法和属性，然后您创建模型的实例与新或一组模式级作为一个集合的 模型属性以便收集，可以创建模型的新实例。您的模型应该看起来更像是这样的：
VAR模型= Backbone.Model.extend（{
默认值：{
名称： ''，
HREF：''
}
}）;
请注意，有没有新在那里，我们要做的仅仅是阶级，以立足于我们的模型实例。然后我们挂钩产品型号多达集合（再次使用延长没有新）
VAR收藏= Backbone.Collection.extend（{
型号：型号
}）;
现在您可以创建集合的实例，并把它的数据，对模型的数组
VAR链接=新的集合（[
{名称：'雅虎'中，href：http://www.yahoo.com}，
{名的Gmail'中，href：http://www.gmail.com}，
{名称：'兵'中，href：http://www.bing.com'}
]）;
您会收集常常传递给视图，而不是使视图实例化集合; 骨干将自动设定 this.collection 如果您说新SomeView（{集合：some_collection}）让您可以：
VAR查看= Backbone.View.extend（{
// ...
初始化：功能（）{
this.template = $（'＃临时'）儿童（）。
}，
和说新视图（{集：链接}）并通过 this.collection 访问集合中的其它地方该视图。
一个集合是几种模式的集合（有点像数组），这将有各种有用凸显了混合方法，这样就可以通过类似这样的集合迭代：
渲染：功能（）{
this.collection.each（功能（链接）{
。VAR李= this.template.clone（）找到（'A'）ATTR（'href属性，link.get（'HREF'））文本（link.get（'名'））;
这个$（'UL'）追加（LI）。
}， 这个）;
}
还要注意使用 GET 的访问模型属性，模型属性和对象属性是不同的东西。您也可以使用 的toJSON 拼合所有数据一次。最后的这个参数 每个 让这个回调视图中。骨干网已经提供在视图的的这一点。$ el.find（）别名= nofollow的> 这一点。$（） 方法，所以我切换到这一点。
下面是一个简单的演示： http://jsfiddle.net/ambiguous/WSqLM/
I am(as a beginner) making a small backbone function to append my links, for this i using the collection to be assigned model,
But the collection throw the error.. any one can correct my code please?
$(function(){
var Model = new Backbone.Model({
data:[
{name:'Yahoo',href:'http://www.yahoo.com'},
{name:'Gmail',href:'http://www.gmail.com'},
{name:'Bing',href:'http://www.bing.com'}
]
});
var Collection = new Backbone.Collection.extend({
model:Model // is this not correct way to do?
});
var View = Backbone.View.extend({
el:'#container',
events:{
'click button':'render'
},
initialize:function(){
this.collection = new Collection(); //throw the error!
this.template = $('#temp').children();
},
render:function(){
var data = this.collection.get('data');
for(i=0;i<data.length;i++){
var li = this.template.clone().find('a')
.attr('href',data[i].href)
.text(data[i].name).end();
this.$el.find('ul').append(li);
}
}
});
var myLink = new View();
})
Models are used to store and manage individual chunks of data. In your case that would be a single name/href pair. Usually you use Backbone.Model.extend to create a model "class" with all your model-specific methods and properties and then you create instances of that model with new or set that model "class" as a collection's model property so that the collection can create new instances of the model.
Your model should look more like this:
var Model = Backbone.Model.extend({
defaults: {
name: '',
href: ''
}
});
Notice that there's no new in there as we're just making a "class" to base our model instances on. Then we hook the model up to a collection (again using extend with no new):
var Collection = Backbone.Collection.extend({
model: Model
});
Now you can create an instance of the collection and hand it an array of data for the models:
var links = new Collection([
{ name: 'Yahoo', href: 'http://www.yahoo.com' },
{ name: 'Gmail', href: 'http://www.gmail.com' },
{ name: 'Bing', href: 'http://www.bing.com' }
]);
You'll often pass the collection to the view rather than making the view instantiate the collection; Backbone will automatically set this.collection if you say new SomeView({ collection: some_collection }) so you can:
var View = Backbone.View.extend({
//...
initialize: function() {
this.template = $('#temp').children();
},
and say new View({ collection: links }) and access the collection through this.collection elsewhere in the view.
A collection is a collection of several models (sort of like an array) and it will have various useful Underscore methods mixed in so you can iterate through the collection like this:
render: function() {
this.collection.each(function(link) {
var li = this.template.clone().find('a').attr('href', link.get('href')).text(link.get('name'));
this.$('ul').append(li);
}, this);
}
Also notice the use of get to access model attributes, model attributes and object properties are different things. You can also use toJSON to flatten all the data at once. The final this argument to each makes this inside the callback the view. Backbone already supplies a this.$el.find() alias in the view's this.$() method so I switch to that as well.
Here's a simplified demo: http://jsfiddle.net/ambiguous/WSqLM/
这篇关于Backbone.js的胶原凝集抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
