Магистральная выборка добавляет новые строки для просмотра, а не обновляет существующие.

Я все еще изучаю Backbone, но насколько я понимаю, в этой ситуации он должен автоматически обновлять представление. Мое представление основного индекса представляет собой таблицу, в которой каждая строка представляет собой представление одной модели.

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

Модель и коллекция:

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'

вид друга:

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

друг.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>

Сначала я создаю экземпляр и заполняю коллекцию с помощью сброса следующим образом:

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

Затем я создаю экземпляр своего индексного представления и передаю ему свою коллекцию:

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

Все это отлично работает, и таблица отображается со строками с веб-сервера. Однако затем я хочу периодически обновлять список друзей изменениями, которые произошли на сервере, поэтому я использую метод collection.fetch следующим образом (где updateStatus — это что-то совершенно не связанное с описанным до сих пор кодом):

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

Данные возвращаются из выборки и анализируются должным образом, однако они добавляют строки в мою таблицу, а не обновляют существующие строки. Как я могу заставить это работать так, как я намереваюсь?


javascript coffeescript backbone.js
person sethdeckard    schedule 27.04.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле вы никогда не очищаете таблицу, когда она сбрасывается.

Обновите свою функцию addAll, чтобы очистить таблицу. Что-то вроде этого:

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

  # ...

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

  # ...

Обратите внимание, что очистка таким образом может быть немного негерметичной в зависимости от сложности вашего кода/взаимодействий. Вам может потребоваться сохранить ссылку на каждое дочернее представление, когда они будут добавлены, а затем при очистке вы перебираете каждый и вызываете свой собственный код удаления (если он у вас есть).

Вам также может понадобиться обернуть заголовок таблицы в файл index.jst.ejs, чтобы он не очищался вместе с остальной частью тела таблицы:

<table id="friends_table" class="table table-striped table-bordered">
    <thead>
        <tr>
          <td>Name</td>
          <td>Status</td>
        </tr>
    </thead>
</table>
person Kevin Peel    schedule 27.04.2012
comment
Первая часть работает, спасибо, однако, если я добавлю тег thead, строки никогда не добавляются, и остается просто пустая таблица с заголовками. - person sethdeckard; 27.04.2012
comment
Пришлось также объявить пустой тег tbody. - person sethdeckard; 27.04.2012
comment
Ах, забыл добавить это туда. Хороший улов. - person Kevin Peel; 29.04.2012