Question

I’ve been trying to learn Backbone.

I set up collection of models, each of which has it’s own view that should render every time the model syncs with the server. The server sends back an ID for the model. It’s seems to be rendering before the model ID is set. If you look at the console.log() output, I have it print the model’s id just before it renders. I also have it print each event as it happens. I get:

undefined (model id)
add
change:id
change (not sure what changes here?)
sync

Also, I have it change the model’s name attribute after a 2 sec pause model.save('name', 'New Name'). This causes another sync event, but the view doesn’t update.

Here’s the working code: http://jsfiddle.net/flackend/brB7y/1/

Or see it here:

var game_library;

(function($) {

    _.templateSettings = {
        interpolate: /\{(.+?)\}/g
    };    

    var GameModel = Backbone.Model.extend({
        url: '/gh/gist/response.json/2895708/',
        name: undefined,
        initialize: function() {

            // Create a view for this model
            this.view = new GameView({model: this});

            // Sync model with server
            this.save();

            // Bind events
            this.on('sync', this.view.render());
            this.on('all', this.console);
        },
        console: function(event, model, changes) {

            console.log('['+ ++this.i +']-------------(event[:attr], model, changes)----------------');
            console.log(event);
            console.log(model);
            console.log(changes);
        },
        i: 0
    });

    var GameCollection = Backbone.Collection.extend({
        model: GameModel
    });

    var GameView = Backbone.View.extend({
        el: $('#holder'),
        template: $('#game-template').html(),
        render: function() {

            var template = _.template(this.template);
            console.log(this.model.id);
            this.$el.html(template(this.model.toJSON()));
        }
    });

    // Instantiate new game collection
    game_library = new GameCollection;

    // Add a game
    // Note: can only pass in 1 ID from gist, so only add 1 game.
    var games = [
        new GameModel({name: 'Skyrim'})
    ];

    // Note: `game_library.add(new GameModel({name: 'Skyrim'}));` does
    // not work for some reason having to do with instances...
    game_library.add(games);

    // 2 sec later...
    window.setTimeout(function() {

        game_library.get(1).save('name', 'The Elder Scrolls V: Skyrim');
    }, 2000);
})( jQuery );

Thanks for any help!!​

Answer 1

Updated gist at http://jsfiddle.net/brB7y/2/. I’ve moved your refresh call to a local function which works. I’m not sure about the technical reasons behind this but it’s how I’ve used it before.