Backbone.js的款式无添加对象 [英] Backbone.js Collection Not Adding Objects
问题描述
我试图从服务器获取收集数据并将其加载到我的收藏对象,与Backbone.js的。我想获取这些数据在一开始,并与这些数据加载我的HTML页面。但是,我从服务器下载数据没有得到适当的填充到集合。收集长度为零,也有谁知道我做错了吗?
(函数($){
window.Menu = Backbone.Model.extend({}); window.MenuCollection = Backbone.Collection.extend({
型号:window.Menu,
初始化:功能(){
_.bindAll(这一点,'分析');
},
网址:函数(){
回归的http://本地主机:8080 /测试/ 123';
},
解析:功能(RESP){
的console.log(RESP);
//这个打印:
//[{名:helloworld1},{名:helloworld2}] this.add(RESP);
this.add(新菜单({名字:黑色的perl}));
的console.log(本);
//对象在控制台日志长度为0
}
}); window.MenuView = Backbone.View.extend({
标签名:礼,
初始化:功能(){
_.bindAll(这一点,'渲染');
},
渲染:功能(){
$(this.el)的.html('<跨度>'+ this.model.get('名')+'< / SPAN>');
返回此;
}
}); window.MenuListView = Backbone.View.extend({
标签名:UL,
初始化:功能(){
_.bindAll(这一点,'渲染');
},
渲染:功能(){
this.model.each(功能(菜单){
$(this.el).append(新MenuView({模式:菜单})渲染()EL);
}); 返回此;
}
}); VAR视图。
APPVIEW = Backbone.View.extend({
EL:$(机构),
初始化:功能(){
this.menus =新MenuCollection();
this.menuListView =新MenuListView({模式:this.menus});
鉴于= this.menuListView;
this.menus.fetch({成功:函数(){的console.log(成功);
的console.log(view.render()埃尔。);}});
},
事件:{ }
}); VAR APPVIEW =新APPVIEW;})(jQuery的);
您是如何误解 解析
作品:
解析
collection.parse(响应)
解析被称为骨干每当一个集合的模型是由服务器返回,在取。该函数传递的原始
响应
对象,应该返回模型的属性数组添加到集合中。
块引用>所以,如果你得到
[{名:helloworld1},{名:helloworld2}]
从服务器,你不甚至不需要一个解析
实施你与
看到的奇怪行为添加
更有趣。如果我们看一下取
,我们看到这样的:获取:功能(选件){
// ...
options.success =功能(RESP,状态XHR){
集合[options.add? 加:复位(collection.parse(RESP,XHR),期权);
如果(成功)的成功(收集,RESP);
};
// ...
}您正在呼叫
取
没有添加
选项设置这样的事情发生是这样的:
collection.parse
被调用。- 您
解析
添加了一些事情,并呼吁的console.log
。- 您解析根本不返回任何东西。
collection.reset
被称为添加什么解析
返回。重置
将清除出的集合,然后添加任何内容,因为解析
未返回任何内容。一些
的console.log
的实施摆在控制台实时参考,这就是为什么你在控制台中得到一个空的集合:的console.log(这一点)
结束显示这个
的之后的的重置
通话I am trying to fetch a collection data from the server and load it into my collection object, with Backbone.js. I want to fetch these data at the start, and load my html page with these data. However, the data I downloaded from the server does not get populated into the collection properly. The collection length is zero, do anyone know what I am doing wrong?
(function ($) { window.Menu = Backbone.Model.extend({}); window.MenuCollection = Backbone.Collection.extend({ model: window.Menu, initialize: function() { _.bindAll(this, 'parse'); }, url: function(){ return 'http://localhost:8080/testing/123'; }, parse : function(resp) { console.log(resp); // this prints: // "[{"name":"helloworld1"},{"name":"helloworld2"}]" this.add(resp); this.add(new Menu({name:"black perl"})); console.log(this); // the length of the object in the console log is 0 } }); window.MenuView = Backbone.View.extend({ tagName: 'li', initialize: function() { _.bindAll(this, 'render'); }, render: function() { $(this.el).html('<span>'+this.model.get('name')+'</span>'); return this; } }); window.MenuListView = Backbone.View.extend({ tagName: 'ul', initialize: function() { _.bindAll(this, 'render'); }, render: function() { this.model.each(function(menu) { $(this.el).append(new MenuView({model:menu}).render().el); }); return this; } }); var view; AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.menus = new MenuCollection(); this.menuListView = new MenuListView({model:this.menus}); view = this.menuListView; this.menus.fetch({success: function(){console.log("success"); console.log(view.render().el);}}); }, events: { } }); var appview = new AppView; })(jQuery);
解决方案You're misunderstanding how
parse
works:parse
collection.parse(response)
parse is called by Backbone whenever a collection's models are returned by the server, in fetch. The function is passed the raw
response
object, and should return the array of model attributes to be added to the collection.So if you're getting
[{"name":"helloworld1"},{"name":"helloworld2"}]
from the server, you don't even need aparse
implementation.The strange behavior you're seeing with
add
is more interesting. If we look atfetch
, we see this:fetch: function(options) { //... options.success = function(resp, status, xhr) { collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); if (success) success(collection, resp); }; //... }
You're calling
fetch
without theadd
option set so things happen like this:
collection.parse
is called.- Your
parse
adds a few things and callsconsole.log
.- Your parse doesn't return anything at all.
collection.reset
is called to add whatparse
returned.reset
will clear out the collection and then adds nothing becauseparse
didn't return anything.Some
console.log
implementations put a live reference in the console, that's why you get an empty collection in the console:console.log(this)
ends up showingthis
after thereset
call.这篇关于Backbone.js的款式无添加对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!