Question

Example: http://franklovecchio-playback.herokuapp.com/?log=true

Full code: https://github.com/franklovecchio/playback

You’ll see the “undefined” attributes come through on the error: Uncaught TypeError: Object #<Thing> has no method 'serializeData' after I return the model on parse override.

Initially, I bind a Collection to a CompositeView:

things = new App.Collections.Things()
things.fetch()

# Render
App.Pages.State.Action1.getLayout().content.show new App.CompositeViews.Action1Things(
  collection: things
)

Inside the collection parse method, I fetch more detailed information about the model (to return an attribute called extra, which renders as undefined:

class App.Collections.Things extends Backbone.Collection

  url: '/things'
  model: App.Models.Thing

  @trace initialize: () ->

  # Override response to get more detailed information about thing.
  @trace parse: (resp) ->

    things = []

    _.each resp, (item) =>

      # Fetch detailed information about thing
      thing = new App.Models.Thing(
        id: item.id
        name: item.name
      )

      thing.fetch()

      things.push thing

    things

Then, inside the model:

class App.Models.Thing extends Backbone.Model

  defaults:
    name: 'n/a'
    extra: 'n/a'

  urlRoot: () ->
    '/thing'

  defaults:
    name: null

  @trace initialize: () ->

    @name = @attributes.name
    @extra = @attributes.extra

  @trace parse: (resp) -> 

    debug.info 'resp: ' + JSON.stringify resp

    @id = resp.id
    @attributes.id = @id

    @name = resp.name
    @attributes.name = @name

    @extra = resp.extra
    @attributes.extra = @extra

    @

Commenting out:

@extra = resp.extra
@attributes.extra = @extra

Causes the error to go away, but the CompositeView doesn’t even attempt to update, than. How do I get the CompositeView to update on parse() completion with fetched model response?

(While the example doesn’t show it, I have to override because the response is not returned like Backbone wants it, in case you were wondering).

Answer 1

I had to modify both the ItemView and the CompositeView’s on 'change' events:

ItemView old:

class App.ItemViews.Action1Thing extends Backbone.Marionette.ItemView
  template: '#template-action1-thing'
  @trace initialize: (options) ->

    @model.on 'change', @render

ItemView new:

class App.ItemViews.Action1Thing extends Backbone.Marionette.ItemView
  template: '#template-action1-thing'
  @trace initialize: (options) ->

    @model.on 'change', () ->
      @render

CompositeView old:

class App.CompositeViews.Action1Things extends Backbone.Marionette.CompositeView

  template: '#template-action1-things'
  collectionEl: 'tbody#things_collection'
  itemView: App.ItemViews.Action1Thing

  @trace initialize: (options) ->

    @collection.on 'change', @render

CompositeView new:

class App.CompositeViews.Action1Things extends Backbone.Marionette.CompositeView

  template: '#template-action1-things'
  collectionEl: 'tbody#things_collection'
  itemView: App.ItemViews.Action1Thing

  @trace initialize: (options) ->

    @collection.on 'change', (model) ->
      @.remove model
      @.add model
      @render