Backbone.jsコレクションにオブジェクトを追加していません

Question

サーバーからコレクションデータを取得し、コレクションオブジェクトにBackbone.jsをロードしようとしています。私はこれらのデータを最初にフェッチし、これらのデータでHTMLページをロードしたいと思います。ただし、サーバーからダウンロードしたデータはコレクションに適切に取り込まれません。コレクションの長さはゼロです、誰かが私が間違っていることを知っていますか？

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

Answer 1

あなたはどのように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); 
    }; 
    //... 
} 

あなたは物事がこのように起こるように設定addオプションなしでfetchを呼んでいる：

1. collection.parseと呼ばれています。
2. parseはいくつか追加してconsole.logに電話します。
3. あなたの解析では何も返されません。
4. collection.resetが返され、parseが返されます。
5. resetは、コレクションを消去してから、何も追加しません。parseは何も返しませんでした。 console.log(this)はreset呼び出しの後thisを示す終わる：

一部console.logの実装では、コンソールで空のコレクションを取得する理由です、コンソールでのライブ参照を置きます。

Answer 2

実際には、ビューのレンダリングの中でforループのコンテキストに "this"を渡していないという別の問題があります。したがって、 "el"要素を返すと、サーバーの内容がなくてもHTMLページは空白になります。

Answer 3

backbone.js 0.9+ バージョン0.5.3の利用可能な解析メソッドは構文解析を呼び出さないことに注意してください。