Subview example for zzart

subviews.coffee

# snipped all the outer require js stuff

class InnerViewBase extends Chaplin.View # Or whatever your base view is
  autoRender: true
  container: "#innerViewContainer"
  containerMethod: "html"

  initialize: (templateName) ->
    @template = require templateName

    super

class ListViewA extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_a"

    # Do any event handlers in here, instead of the outer view
    # @delegate 'click',  @click_ev

class ListViewB extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_b"

class ListViewC extends InnerViewBase
  initialize: ->
    super "views/templates/list_view_b"

class OfferListView extends View
  autoRender: true
  container: "[data-role='content']"
  containerMethod: 'html'

  initialize: ->
    super
    @template = template
    
    #views
    # Consider changing these three id subscriptions to a class
    @delegate 'change', '#list_view_a', @change_list_view
    @delegate 'change', '#list_view_b', @change_list_view
    @delegate 'change', '#list_view_c', @change_list_view
    @delegate 'click',  @click_ev

  afterRender: ->
    # Add a default ListView here if you want
    # @subview "ListView", new ListViewA

  change_list_view: (event) =>
    console.log('change')

    # Make a hacky looking map to the subview constructors
    viewNames = 
      "list_view_a": ListViewA
      "list_view_b": ListViewB
      "list_view_c": ListViewC
    
    @subview "ListView", new viewNames[event.target.id]

  click_ev: =>
    console.log('click')
  
  getTemplateData: =>
    @collection.toJSON()