删除模型后删除多个视图

Question

我的应用程序的结构如下：有一个侧边栏，其中包含许多项目，并由 SidebarView 生成。 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 并向服务器发送 DELETE 请求。但是从侧边栏删除 ItemView 的最佳方法是什么？添加诸如

这样的 ID，然后通过数据索引删除项目？我见过有人使用 jQuery.data 将数据绑定到 DOM 树。但这两种解决方案看起来都有点臭。有没有一种优雅的方法来实现这一点？

Answer 1

您的 ItemView 应该处理“删除”按钮。顺序如下：

1. 您点击删除按钮。
2. 这会在相应的 ItemView 上触发一个事件。
3. ItemView 破坏了模型。
4. 销毁模型会触发模型的 'destroy' 事件。
5. 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...

这样，如果您的 Item 模型之一被其他人破坏，您的视图将做出适当的响应。

演示： http://jsfiddle.net/ambigously/KMT74/1/

如果其他人呈现删除按钮，那么您只需要在适当的模型实例上调用 destroy ，ItemView 就会自行删除。有关示例，请参阅演示中的先杀死按钮。您可以在 ItemView 的 el 上使用 data-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"