Backbone.js集合不添加對象

我想從服務器獲取集合數據並將其加載到我的集合對象中，並使用Backbone.js。我想在開始時獲取這些數據，並使用這些數據加載我的html頁面。但是，我從服務器下載的數據沒有正確填充到集合中。收集長度爲零，有誰知道我做錯了什麼？Backbone.js集合不添加對象

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

來源

2012-03-12 Jeffrey Chen

我在這裏看不到很多努力來簡化示例代碼。如果您可以向我們展示重現相同問題的非常小版本的代碼，可能會有所幫助。 – fguillen 2012-03-13 15:37:49

你誤解如何parse作品：

解析collection.parse(response)

解析無論何時，只要一個集合的模型是由服務器返回骨幹調用，取。該函數傳遞了原始response對象，並應返回要添加到集合中的模型屬性數組。

因此，如果您從服務器獲得[{"name":"helloworld1"},{"name":"helloworld2"}]，則甚至不需要parse實現。

你看到的add的奇怪行爲更有趣。如果我們看一下fetch，我們看到：

fetch: function(options) { 
    //... 
    options.success = function(resp, status, xhr) { 
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); 
    if (success) success(collection, resp); 
    }; 
    //... 
}

你調用fetch沒有add選項設置這樣的事情發生是這樣的：

collection.parse被調用。
您的parse增加了一些東西，並調用console.log。
你的解析不會返回任何東西。
collection.reset被調用以添加parse返回的內容。
reset將清除該集合，然後添加任何內容，因爲parse沒有返回任何內容。

一些console.log實現把一個活引用在控制檯，這就是爲什麼你在控制檯得到一個空的集合：console.log(this)最終顯示的reset電話後this。

來源

2012-03-12 22:56:08

該代碼似乎已經改變，因爲這個答案寫道：https://github.com/jashkenas/backbone/blob/master/backbone.js#L873我們現在應該做什麼？ – qwertynl 2014-07-03 14:21:20

@qwertynl關於'add'的一點只是對他們從'parse'看到的看似奇怪的行爲的解釋。答案的肉是根本不需要「解析」實現。 – 2014-07-03 18:34:07

實際上，您遇到的另一個問題是您沒有將「this」傳遞到您的視圖渲染中for循環的上下文中。因此，當你返回「el」元素時，你的html頁面將是空白的，沒有來自服務器的內容。

來源

2012-03-12 23:05:18 S4petah

而'MenuListView'應該使用'collection'而不是'model'。 – 2012-03-12 23:11:14

請記住，來自backbone.js 0.9+ 版本0.5.3的解析方法不會調用解析。

來源

2012-09-03 16:31:54

Backbone.js集合不添加對象

回答

相關問題