Question

I’m still learning Backbone but it is my understanding that it should handle updating the view automatically in this situation. My primary index view is a table where each row is a view of a single model.

index_view:

Tracker.Views.Friends ||= {}

class Tracker.Views.Friends.IndexView extends Backbone.View
  template: JST["backbone/templates/friends/index"]

  initialize: () ->
    _.bindAll(this, 'addOne', 'addAll', 'render');

    @options.friends.bind('reset', this.addAll);

  addAll: () ->
    @options.friends.each(this.addOne)

  addOne: (chaser) ->
    view = new Tracker.Views.Friends.FriendView({model : friend})
    this.$("tbody").append(view.render().el)

  render: ->
    $(this.el).html(this.template(friends: this.options.friends.toJSON() ))
    @addAll()

    return this

model and collection:

class Tracker.Models.Friend extends Backbone.Model
  paramRoot: 'friend'

  defaults:
    name: null
    status: null

class Tracker.Collections.FriendsCollection extends Backbone.Collection
  model: Tracker.Models.Friend
  url: '/friends.json'

friend view:

Tracker.Views.Friends ||= {}

class Tracker.Views.Friends.FriendView extends Backbone.View
  template: JST["backbone/templates/friends/friend"]

  events:
    "click .destroy" : "destroy"

  tagName: "tr"

  destroy: () ->
    @options.model.destroy()
    this.remove()

    return false

  render: ->
    $(this.el).html(this.template(this.options.model.toJSON() ))    
    return this

friend.jst.ejs:

<td><a href="javascript:void(0);" data-friendid="<%= id %>" class="friend-link"><%= name %></a></td>
<td><span class="label"><%= status %></span></td>

index.jst.ejs:

<table id="friends_table" class="table table-striped table-bordered">
    <tr>
      <td>Name</td>
      <td>Status</td>
    </tr>
</table>

I initially instantiate and populate the collection using reset as follows:

friends = new Tracker.Collections.FriendsCollection()
friends.reset data

I then instantiate my index view and pass it my collection:

view = new Tracker.Views.Friends.IndexView(friends: friends)

This all works fine and a table is displayed with rows from the web server. However I then want to periodically update the list of friends with changes that have happened on the server, so I am using the collection.fetch method as follows (where updateStatus is something completely unrelated to the code described so far):

window.setInterval (->
  friends.fetch success: updateStatus
), 10000

The data is returned from fetch and parsed properly however it appends rows to my table rather than updating the existing rows. How can I make this work the way I intend?

Answer 1

You’re never actually clearing the table when it gets reset.

Update your addAll function to clear the table. Something like this:

class Tracker.Views.Friends.IndexView extends Backbone.View
  template: JST["backbone/templates/friends/index"]

  # ...

  addAll: () ->
    @$("tbody").empty()
    @options.friends.each(this.addOne)

  # ...

Note that clearing that way may be a little leaky depending on how complex your code/interactions are. You may need to save a reference to each child view when they’re added, then when clearing you loop through each and call whatever your custom remove code is (if you have any).

You may also need to wrap the table header in your index.jst.ejs file so it doesn’t get cleared with the rest of the table body:

<table id="friends_table" class="table table-striped table-bordered">
    <thead>
        <tr>
          <td>Name</td>
          <td>Status</td>
        </tr>
    </thead>
</table>