Two views, same action but show different results

Vote count:

0

I have two views,

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 .remove":    "destroyEntry"

  showCollection: ->
    console.log (@collection)

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

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

This is the template this view renders

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

And

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')
    console.log (thisid)
    console.log (@collection)
    ###@collection.get(thisid).destroy()###

This is the template this view renders,

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

As you can see both views have a click event that fires when I click on a .remove element. This is the console output from that click,

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

So one view is logging a model, and the other view is logging a collection. (correct?)

In the second view (which renders the entry template) I want to remove a model from the collection and rerender the entry template when the collection changes. But If use @collection.get(thisid).destroy() (which is commented) I get the following error,

Uncaught TypeError: Cannot read property 'destroy' of undefined 
    Movieseat.Views.Entry.Entry.destroyEntry 
    jQuery.event.dispatch
    elemData.handle

If I use the @collection.get(thisid).destroy() in first view (which renders the index template). It does destroy the model, but I don't want to do that event in that view. I want it in the other view.

asked 1 min ago

Peter Boomsma

332

Two views, same action but show different results