I've got two views. The first view renders the entry
template containing data from that collection in a list element.
class Movieseat.Views.Entry extends Backbone.View
template: JST['movieseats/entry']
className: 'movie-frame'
render: ->
$(@el).html(@template(entry: @collection))
this
The second view rerenders the above said template inside a #entries
div which is being rendered in this #showentry
template.
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()
This is the template structure,
Entry template,
<div data-id="<%= @entry.get('id') %>">
<p><%= @entry.get('title') %></p>
<p><%= @entry.get('id') %></p>
<p class="remove">Remove</p>
</div>
ShowEntry template
<div id="entries"></div>
When I load the page the models get rendered in the entry
template from the first view. Then the second view takes all the entries in the collection and appends them to the #entries
div container.
When I do action like delete or change a collection the second view rerenders the showentry
template. But when it does that it does not repopulate the #entries
with the models from the collection. Resulting in a empty #entries
div, where before it was filled with .movie-frame
divs containing models.
Is there a way to fix this?