gpt4 book ai didi

backbone.js - 删除模型后删除多个 View

转载 作者:行者123 更新时间:2023-12-04 03:16:47 27 4
gpt4 key购买 nike

我的应用程序的结构如下:有一个包含许多项目的边栏,由 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 的最佳方法是什么?从侧边栏?添加像 <div class="item" data-index="123"></div> 这样的 ID然后通过数据索引删除项目?我见过有人用 jQuery.data将数据绑定(bind)到 DOM 树。但是这两种解决方案看起来都有点臭。是否有一种优雅的方式来实现这一目标?

最佳答案

您的 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 模型被其他人破坏,您的 View 将做出适当的响应。

演示:http://jsfiddle.net/ambiguous/KMT74/1/

如果其他人呈现删除按钮,那么您只需要在适当的模型实例上调用 destroy,ItemView 就会自行删除。有关示例,请参见演示中的先杀死 按钮。您可以在 ItemView 的 el 上使用 data-id 属性将模型与其 View 相关联,然后执行类似以下操作:

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"

关于backbone.js - 删除模型后删除多个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9168957/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com