Question

我有两个观点。第一个视图在列表元素中呈现包含该集合中数据的entry模板。

class Movieseat.Views.Entry extends Backbone.View

  template: JST['movieseats/entry']
  className: 'movie-frame'

  render: -> 
    $(@el).html(@template(entry: @collection))
    this

第二个视图在#entries div中重新呈现上述模板，该模板正在此#showentry模板中呈现。

class Movieseat.Views.Showentry extends Backbone.View

  template: JST['movieseats/showentry']
  className: 'showmovie'

  initialize: -> 
    @collection.on('destroy', @render, this)
    @collection.on('change', @render, this)
    @collection.on('add', @appendEntry, this)
    return

  render: -> 
    $(@el).html(@template(entry: @collection))
    this

  events: -> 
    "click .remove":    "destroyEntry"

  appendEntry: (entry) ->
    view = new Movieseat.Views.Entry(collection: entry)
    $('#entries').append(view.render().el)

  destroyEntry: (e) -> 
    thisid = @$(e.currentTarget).closest('div').data('id')
    @collection.get(thisid).destroy()

这是模板结构，

输入模板，

<div data-id="<%= @entry.get('id') %>">
    <p><%= @entry.get('title') %></p>
    <p><%= @entry.get('id') %></p>
    <p class="remove">Remove</p>
</div>

ShowEntry模板

<div id="entries"></div>

当我加载页面时，模型会在第一个视图的entry模板中呈现。然后第二个视图获取集合中的所有条目，并将它们附加到#entries div容器。

当我执行删除或更改集合等操作时，第二个视图会重新呈现showentry模板。但是当它这样做时，它不会使用集合中的模型重新填充#entries。导致空#entries div，之前填充了包含模型的.movie-frame div。

有没有办法解决这个问题？

使用Backbone渲染模板内的模板

0 个答案: