Question

I’m studying a few JavaScript books, messing around with Node.js/Express/Jade/Backbone.js and experimenting with a simple web app to keep track of poker tournaments so as to improve my novice JS skills, learn the previously mentioned technologies, and make a decent poker app at the same time. This is the code I have so far, using various sources around the web and PeepCodes first Backbone.js Screencast (I have node.js set up as a backend 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);

This works perfectly. I have a page with a populated table of poker tournaments. But after I attempt to bootstrap the data so that it isn’t fetching it after the page loads (and showing an unpopulated table for a fraction of a second) it no longer works. I’ve put the following code in the body of the app’s one page (app.jade, a Jade template), right after the container, (#container), used by Backbone.js and also removed the windows.tournaments.fetch(); line from the above code.

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

The tournies object is being passed to the Jade template (app.jade) from the Node.js route that renders it. Using Firebug, I can see that the reset() function is successfully getting the data in a JSON format and the table is being created by Backbone… but it isn’t being populated. Any help would be appreciated since I have absolutely no clue as to what the issue is. Also, I apologize if I made any mistakes in the structure of my question as I haven’t posted here before. Feel free to let me know if I have.

Answer 1

My first guess would be, that the document is not ready when you execute the script, try this:

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

My second is that you need to look at the JSON data. Try to go to the console and add some of the Tournaments to the collection by hand and look what the results are, maybe there is some kind of error in parsing.

A side note on your code, to organize your code better you should use the module pattern and name things with a schema like this: http://ricostacruz.com/backbone-patterns/#namespace_convention