Backbone.js .reset（）未能引導數據

我正在學習一些JavaScript書籍，亂搞Node.js/Express/Jade/Backbone.js並嘗試使用一個簡單的Web應用程序來跟蹤撲克錦標賽以提高我的新手JS技能，學習前面提到的技術，並在同一時間製作一個體面的撲克應用程序。這是我到目前爲止，使用網絡上的各種資源和PeepCodes第一Backbone.js的截屏（我的node.js設置爲後端API）代碼：Backbone.js .reset（）未能引導數據

(function ($) { 
    window.Tournament = Backbone.Model.extend({}); 

    window.Tournaments = Backbone.Collection.extend({ 
     model: Tournament, 
     url: '/tournaments' 
    }); 

    window.tournaments = new Tournaments(); 

    // I removed this line once I attempted to bootstrap the data. 
    window.tournaments.fetch(); 

    window.TournamentView = Backbone.View.extend({ 
     tagName: 'tr', 
     className: 'tournaments', 

     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.model.bind('change', this.render); 
      this.template = _.template($("#tournament-template").html()); 
     }, 
     render: function() { 
      var renderedContent = this.template(this.model.toJSON()); 
      $(this.el).html(renderedContent); 
      return this; 
     } 
    }); 

    window.TournamentsView = Backbone.View.extend({ 
     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.collection.bind('reset', this.render); 
     }, 
     render: function() { 
      $(this.el).html($("#tournaments-template").html()); 
      (this.collection).each(function(tournament) { 
       var view = new TournamentView({ 
        model: tournament, 
        collection: this.collection 
       }); 
       $("#tournaments").append(view.render().el); 
      }); 
      return this; 
     } 
    }); 

    window.BackboneTournaments = Backbone.Router.extend({ 
     routes: { 
      '': 'tournaments' 
     }, 
     initialize: function() { 
      this.tournamentsView = new TournamentsView({ 
       collection: window.tournaments 
      }); 
     }, 
     tournaments: function() { 
      $("#container").empty(); 
      $("#container").append(this.tournamentsView.render().el); 
     } 
    }); 

    $(function() { 
     window.App = new BackboneTournaments(); 
     Backbone.history.start({}); 
    }); 

})(jQuery);

這完美的作品。我有一個紙牌撲克錦標賽表。但是，在我試圖引導數據以便在頁面加載後不提取數據（並且顯示一小部分時間沒有填充的表）時，它不再有效。我將下面的代碼放在應用程序的一個頁面（app.jade，一個Jade模板）的正文中，就在容器後面（#container），由Backbone.js使用，並且還刪除了windows.tournaments.fetch（）;從上面的代碼行。

script(type="text/javascript") 
    tournaments.reset(!{JSON.stringify(tournies)});

tournies對象正在從呈現它的Node.js路徑傳遞到Jade模板（app.jade）。使用Firebug，我可以看到reset（）函數成功獲取JSON格式的數據，並且該表由Backbone創建...但它沒有被填充。任何幫助將不勝感激，因爲我完全不知道問題是什麼。另外，如果我在我的問題結構中犯了任何錯誤，因爲我之前沒有發佈過，所以我很抱歉。隨時讓我知道，如果我有。

來源

2012-04-24 Brent Morrow

如何'tournaments.reset（{JSON.stringify（tournies） }）'不是給你一個類似的錯誤？ – 2012-04-24 04:17:44

我不知道。它應該給我一個錯誤？我正在拼湊某些引用來引導http://dailyjs.com/2011/04/04/node-tutorial-19/和http://documentcloud.github.com/backbone/#FAQ-bootstrap中的數據。我在我的錦標賽集合上運行重置方法，並向它傳遞與錦標賽相對應的JSON對象數組。 – 2012-04-24 05:36:55

這就是Jade模板而不是JavaScript？你可能想要說清楚。 – 2012-04-24 05:45:41

我的第一個猜測是，當你執行這個腳本文件還沒有準備好，試試這個：

$(document).ready(function(){ 
    tournaments.reset(!{JSON.stringify(tournies)}); 
});

我的第二個是，你需要看看JSON數據。試着去控制檯，手動添加一些錦標賽到集合中，看看結果是什麼，也許在解析時會出現某種錯誤。

您的代碼一個側面說明，將代碼組織好你應該使用模塊模式和名稱事情是這樣的模式：http://ricostacruz.com/backbone-patterns/#namespace_convention

來源

2012-04-24 06:22:24

很棒，它現在完美地與$（document）.ready一起工作。謝謝您的幫助。我有點惱火，它是如此簡單，因爲我應該知道使用document.ready。 = /另外，我只是遵循第一個Peepcode Screencast的慣例。我不知道爲什麼這樣做。仍在學習。感謝鏈接到骨幹模式命名空間轉換。它和整個網站本身看起來非常有用和有用。 – 2012-04-24 06:31:52

太棒了，玩得開心:) – 2012-04-24 09:40:27

Backbone.js .reset（）未能引導數據

回答

相關問題