模板没有'在Backbone集合中发生更改后,无法重新发送

Template doesn't rerender after change in Backbone collection

本文关键字:新发送 集合 Backbone      更新时间:2023-09-26

我有一个呈现模板entry的视图。当a模型被添加到集合movieSeats时,它执行@collection.on('add', @appendEntry, this)部分,该部分将模板entry添加到#entries容器。

class Movieseat.Views.Entry extends Backbone.View
  template: JST['movieseats/entry']
  className: 'movie-frame'
  initialize: -> 
    @collection.on('change', @render, this)
    @collection.on('add', @appendEntry, this)
    @collection.on('destroy', @render, this)
    return
  render: -> 
    $(@el).html(@template(entry: @collection))
    this
  events: ->
    "click div":"showCollection"
  showCollection: ->
    console.log @collection
  appendEntry: (entry) ->
    view = new Movieseat.Views.Entry(collection: entry)
    $('#entries').append(view.render().el)

在另一个视图中,我有一个从集合中删除模型的事件。

class Movieseat.Views.MovieseatsIndex extends Backbone.View
  template: JST['movieseats/index']
  render: -> 
    $(@el).html(@template())
    this
  events: -> 
    "click li":         "addEntry" 
    "click .remove":    "destroyEntry" 
  addEntry: (e) -> 
    movie_title = $(e.target).text()
    @collection.create title: movie_title
  destroyEntry: (e) -> 
    thisid = @$(e.currentTarget).closest('div').data('id')
    @collection.get(thisid).destroy()

这也起作用,影片会从集合中删除,但问题是当我从集合中移除模型时,Entry视图中的@collection.on('destroy', @render, this)不会起任何作用。我必须刷新页面才能查看删除事件的结果。

更新

在这两个视图中,我都将console.log (@collection)添加到div元素上的单击事件中。当我点击一个div时,我会得到这个结果,

Backbone.Model {cid: "c5", attributes: Object, collection: Movieseats, _changing: false, _previousAttributes: Object…}
Movieseats {length: 8, models: Array[8], _byId: Object, _events: Object, constructor: function…}` 

第一个结果来自Entry视图,第二个来自Movieseat视图。

您是否尝试在集合中侦听remove事件而不是destroy?http://backbonejs.org/#Events-目录

在渲染中添加一个快速console.log,以检查哪些事件导致视图重新运行该函数。根据我的经验,我总是在集合上使用resetaddremovesort事件,在单个模型上使用changedestroy等等。如果你愿意的话,这对我来说更有意义。集合不会被销毁,但项目会被删除。:)