Question

我有一个呈现模板entry的视图。当模型添加到集合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()

这也有效，电影会从集合中删除，但问题是，当我从集合中删除模型时，@collection.on('destroy', @render, this)视图中的Entry不会什么都不做我必须刷新页面才能看到删除事件的结果。

更新

在这两个视图中，我已将console.log (@collection)添加到div元素的click事件中。当我点击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视图中的第二个结果。

Answer 1

您是否尝试过收听集合中的remove事件而不是destroy？ http://backbonejs.org/#Events-catalog

在渲染中添加一个快速的console.log，以检查哪些事件导致视图重新运行该功能。根据我的经验，我总是对集合使用reset，add，remove和sort事件，change，destroy等等在个别模特。如果你愿意的话，它在语义上更有意义。集合不会被销毁，但会删除项目。：）

在Backbone集合中更改后，模板不会重新渲染

1 个答案: