删除模型后删除多个视图

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

它ShowView从DOM树中删除并向服务器发送DELETE请求.但是什么是ItemView从侧边栏中删除的最佳方法？添加ID <div class="item" data-index="123"></div>,然后通过数据索引删除项目？我见过有人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/ambiguous/KMT74/1/

如果其他人呈现删除按钮,那么您只需要调用destroy相应的模型实例,并且ItemView将自行删除.有关示例,请参阅演示中的kill first按钮.您可以使用data-idItemView上的属性将el模型与其视图相关联,然后执行以下操作:

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"