Backbone.js .reset() Не удалось загрузить данные Bootstrap

Question

Я изучаю несколько книг JavaScript, возиться с Node.js/Express/Jade/Backbone.js и экспериментировать с простым веб-приложением, чтобы отслеживать покерные турниры чтобы улучшить мои новички JS-навыков, изучить ранее упомянутые технологии и сделать приличное покерное приложение одновременно. Это код, который я до сих пор, с использованием различных источников в Интернете и PeepCodes первый Backbone.js Screencast (я node.js настроен как бэкэнд API):

(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 настоящее время передается в шаблон Джейд (app.jade) от маршрута Node.js, что делает его. Используя Firebug, я вижу, что функция reset() успешно получает данные в формате JSON, и таблица создается Backbone ... но она не заполняется. Любая помощь будет оценена по достоинству, поскольку у меня нет абсолютно никакой информации о том, в чем проблема. Кроме того, я приношу свои извинения, если я ошибался в структуре моего вопроса, как я уже здесь не писал. Не стесняйтесь, дайте мне знать, если у меня есть.

Answer 1

Моя первая догадка бы, что этот документ не готов при выполнении сценария, попробуйте следующее:

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

Моя вторая в том, что вы должны смотреть на данные в формате JSON. Попытайтесь зайти на консоль и добавить некоторые из турниров в коллекцию вручную и посмотреть, каковы результаты, может быть, есть какая-то ошибка при разборе.

Примечание стороны на код, чтобы организовать ваш код лучше, вы должны использовать шаблон модуля и имя вещи со схемой, как это: http://ricostacruz.com/backbone-patterns/#namespace_convention