骨幹提取是添加新行來查看而不是更新現有的

Question

我仍然在學習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 

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> 

我最初實例化和使用如下重新填充集合：

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

我然後實例化我的索引視圖，並將它傳遞我的收藏：

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

這一切都正常工作，並顯示錶與Web服務器中的行。然而，我想定期更新發生在服務器上的更改的朋友列表，因此我使用的collection.fetch方法如下（其中updateStatus與目前爲止描述的代碼完全無關）：

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

數據從提取和正確解析返回，但它追加行到我的表而不是更新現有的行。我如何按照我的意圖完成這項工作？

Answer 1

你從來沒有真正清理表時，它被重置。

更新您的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>