Backbone.js 删除模型后删除多个视图

我的应用程序是这样构造的：有一个包含许多项的边栏，由

边栏视图生成。
SidebarView
为侧栏中的每个项目调用一个
ItemView
：

render: ->
  view = new ItemView({model: the_item})
  $(@el).append(view.render().el)

然后有一个
ShowView
，在主div中显示项目。还有一个按钮，用于删除项目

events:
  "click #destroy-button" : "destroy"

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

  return false

它从DOM树中删除
ShowView
，并向服务器发送删除请求。但是，从侧边栏中删除
ItemView
的最佳方法是什么？添加ID，如
，然后通过数据索引删除项目？我见过有人使用
jQuery.data
将数据绑定到DOM树。但这两种解决方案看起来都有点难闻。是否有一种优雅的方法来实现这一点？
您的ItemView应该处理“删除”按钮。顺序如下：

class ItemView extends Backbone.View
    events:
        'click .del': -> @model.destroy()
    initialize: ->
        @model.on('destroy', @remove)
    render: ->
        # ...
        @
    remove: =>
        $(@el).remove()
        # And whatever other cleanup tasks you have...

你按下移除按钮
这将在相应的ItemView上触发事件
ItemView会破坏模型
销毁模型会触发模型中的
'destroy'
事件
ItemView侦听
'destroy'
事件，并在事件发生时删除自身
因此，您的ItemView将如下所示：

class ItemView extends Backbone.View
    events:
        'click .del': -> @model.destroy()
    initialize: ->
        @model.on('destroy', @remove)
    render: ->
        # ...
        @
    remove: =>
        $(@el).remove()
        # And whatever other cleanup tasks you have...

这样，如果您的某个项目模型被其他人破坏，您的视图将做出适当的响应

演示：

如果其他人呈现了delete按钮，那么您只需要在适当的模型实例上调用
destroy
，ItemView就会自动删除。有关示例，请参见演示中的kill first按钮。您可以在ItemView的
el
上使用
数据id
属性将模型与其视图关联，然后执行如下操作：

your_destroy_button_handler: (ev) ->
    item = @collection.get($(ev.target).data('id'))
    item.destroy()

但是ItemView呈现自己的删除按钮会更干净

此外，这：

events:
  "click #destroy-button" : "destroy"

这将是一个问题，因为您将有重复的
id
属性，请为按钮使用一个类：

events:
  "click .destroy-button" : "destroy"

为什么不将视图的渲染绑定到销毁事件，并且仅在模型中有数据时渲染视图中的任何内容？您想删除只是为了节省内存，还是只是希望可见性消失？我希望可见性消失。如果在删除视图的
ItemView
中有一个
destroy
方法，如何绑定到模型销毁事件？我应该将绑定放在
初始化
或
渲染
函数中吗？在视图的初始化方法中：this.model.bind（'destroy'，this.render）-如果您只将模型的destroy事件绑定到视图的渲染方法，则无需在视图上使用destroy方法我已经扩展了您的演示。代码不起作用（我也不知道为什么），但是你知道了：但是
ItemView
没有呈现delete按钮。它由
ShowView
渲染。我是否可以调用
项目视图
？或者我可以从集合中删除模型并重新渲染侧边栏吗？@iblue:为什么ItemView不呈现自己的“删除”按钮？我添加了更多的讨论，讨论了如果您不希望ItemView处理自己的删除按钮，如何处理这些问题。升级到主干0.9.1后，将自动从包含的集合中删除已销毁的模型。我现在只需在
侧栏视图中的
MyCollection.bind'all'，@render
。