Question

I have a collection of models. When a model changes it triggers a change event on the collection. I watch for the collection change event and then I update the UI.

How should I go about updating the UI? Don’t I need to know what models are new, so I can append, and what already exist, so I can update?

One of the reason I feel I need this granularity is because there’s an animation transition, so I need to relate every model to it’s previous state. Does backbone help with this or should I just build this on my own?

Answer 1

to know which models are new, listen to the collection’s “add” event. then you can render the individual item.

MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    // render the new item here
  },

  render: function(){
    this.collection.each(this.renderItem);
  }
});

in this example, rendering the collection works the same as rendering an individual item – it calls the same renderItem method that the “add” event calls.

to handle the scenario where you have a sorted list… you’ll have to do some logic in your renderItem method to figure out the location of the item. something like this maybe (untested code… just an idea):

MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    var itemView = new ItemView({model: item});
    itemView.render();
    return itemView;
  },

  render: function(){
    this.collection.each(function(item){
      var itemView = renderItem(item);
      var itemIndex = item.get("index");
      var previousItem = this.$(".myList")[itemIndex];
      $(itemView.el).insertAfter($(previousItem));
    });
  }
});

this code assumes you have an index attribute on your models to know the order that the models are supposed to be in.

also note that there’s a high likelihood that this code won’t execute as-is, since i haven’t tested it out. but it should give you an idea of the code you’ll want to write.