Javascript 主干提取是向视图中添加新行，而不是更新现有行

我仍在学习主干，但我的理解是，在这种情况下，它应该能够自动更新视图。我的主索引视图是一个表，其中每一行都是单个模型的视图

索引视图：

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'

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

好友视图：

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>

然后实例化索引视图并将其传递给集合：

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'

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

这一切都可以正常工作，并显示一个表，其中包含来自web服务器的行。但是，我希望定期使用服务器上发生的更改更新好友列表，因此我使用collection.fetch方法，如下所示（其中updateStatus与目前描述的代码完全无关）：

---

数据从fetch返回并正确解析，但它会将行追加到我的表中，而不是更新现有行。我怎样才能使它按我所希望的方式工作？

当它被重置时，你永远不会真正清除表

更新

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>

名称
地位

当表被重置时，您永远不会真正清除它

更新

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>

名称
地位

第一部分有效，谢谢，但是如果我添加thead标记，就不会添加任何行，它仍然是一个带有标题的空表。还必须声明一个空的tbody标记。啊，忘了在那里添加它了。很好的捕获。第一部分工作，谢谢，但是如果我添加thead标记，就不会添加任何行，它仍然只是一个带有标题的空表。还必须声明一个空的tbody标记。啊，忘了在那里添加它。抢手货