CODEWITHSUNDEEP
backbone.js
Greg
Greg

Reputation: 6613

backbone.js app odd behavior with views

trying to wrap my head around backbone.js and so far I like what I'm seeing. I have a question about views that I'm not quite understanding. I'm creating a demo app that uses a form input to append a LI to a UL. Pretend it's a list of movies. So I have:

When you click to add a movie, I want to create a new MovieView and append it to the UL in my AppView. I've got a fiddle here: http://jsfiddle.net/nCEz2/

What's happening is that instead of appending an LI to the UL, each time I create a new MovieView, the old MovieView is updated. So instead of appending a new LI to the UL each time, I only ever have the first one I added, updated to the newest item I've added. Any ideas why I'm only getting one MovieView and it's not appending like I think it should?

Upvotes: 1

Views: 201

Answers (1)

Steve
Steve

Reputation: 15736

Your example isn't working the way you expect because the $el property of MovieView is initialised once so it always represents the same DOM object in all instances of MovieView. So although you change the text of the li each time you render a new MovieView you are always adding the same li to the ul and after the first time you add it thats a no-op.

One way to get the behaviour you are expecting is to use the tagName property so that backbone will automatically create a new li element for each view instance. e.g.

var MovieView = Backbone.View.extend({
    tagName: 'li',

    initialize: function () {
        _.bindAll(this, 'render');

        return this.render();
    },

    render: function () {
        $(this.el).text(this.model.get('name'));
    }
});

Then in you AppView.movieAdded method:

movieAdded: function (newMovie) {
    var movieView = new MovieView({
        model: newMovie
    });

    $('#movieList').append(movieView.el); 
},

Upvotes: 2

Related Questions