Backbone.jsを使用したスコープエラー？

Question

私は問題がスコープに関係していると信じています。私はjs初心者です。私は小さなbackbone.jsの例を持っています。私がしようとしているのは、サーバからフェッチされたアイテムのリストをプリントアウトすることです。

$(function(){ 
    // = Models = 
    // Video 
    window.Video = Backbone.Model.extend({ 
     defaults: function() { 
      return { 
       title: 'No title', 
       description: 'No description' 
      }; 
     }, 
     urlRoot: 'api/v1/video/' 
    }); 

    // VideoList Collection 
    // To be extended for Asset Manager and Search later... 
    window.VideoList = Backbone.Collection.extend({ 
     model: Video, 
     url: 'api/v1/video/' 
    }); 

    // = Views = 
    window.VideoListView = Backbone.View.extend({ 
     tagName: 'ul', 

     render: function(eventName) { 
      $(this.el).html(""); 
      _.each(this.model.models, function(video) { 
       $(this.el).append(new VideoListRowView({model:video}).render().el); 
       }, this); 
      return this; 
     } 
    }); 

    // VideoRow 
    window.VideoListRowView = Backbone.View.extend({ 
     tagName: "li", 

     template: _.template("id: <%= id %>; title: <%= title %>"), 

     className: "asset-video-row", 

     render: function() { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    // Router 
    var AppRouter = Backbone.Router.extend({ 

     routes:{ 
      "":"assetManager" 
     }, 

     assetManager:function() { 
      this.assetList = new VideoList(); 
      this.assetListView = new VideoListView({model:this.assetList}); 
      this.assetList.fetch(); 
      $('#content').html(this.assetListView.render().el); 
     } 
    }); 

    var app = new AppRouter(); 
    Backbone.history.start(); 

    // The following works fine: 
    window.mylist = new VideoList(); 
    window.mylistview = new VideoListView({model:window.mylist}); 
}); 

私はコンソールからmylist.fetch(); mylist.toJSON()にアクセスする場合は、マイリストは罰金移入されます。 this.assetList.fetch()はバックエンドから正確にデータを取得していますが、オブジェクトをthis.assetListに追加しているようには見えません。

Answer 1

バックボーンコレクションにfetch methodは非同期です：

は、彼らが到着したときに、コレクションをリセットし、サーバーからこのコレクションのモデルのデフォルトセットを取得します。 [...]カスタムパーシスタンス戦略のために、カバーの下にあるBackbone.syncの代理人。

そしてBackbone.syncは言う：

Backbone.syncバックボーンは、それがサーバーにモデルを読み取りまたは保存しようとするたびに呼び出す関数です。デフォルトでは、(jQuery/Zepto).ajaxを使用してRESTful JSONリクエストを行います。

のでfetchは（非同期）AJAX呼び出しを含み、それはあなたがfetchは、サーバーからデータを取得しています前に、コレクションを使用しようとしていることを意味します。あなたの代わりにこれを行うことができますので、フェッチ注successとerrorコールバックをサポートしています。

var self = this; 
this.assetList.fetch({ 
    success: function(collection, response) { 
     $('#content').html(self.assetListView.render().el); 
    } 
}); 

それともfetchコレクションをリセットするよう、あなたは、コレクションのresetイベントにコールバックを結合することができます。コレクションのresetイベントが発生すると、assetListViewをレンダリングします。

this.assetListView = new VideoListView({collection: this.assetList}); 

と：：

また、あなたのassetListはあなたがやっている必要がありますのでコレクションです

window.VideoListView = Backbone.View.extend({ 
    tagName: 'ul', 

    render: function(eventName) { 
     $(this.el).html(""); 
     _.each(this.collection.models, function(video) { 
      // ...