Backbone / Marionette controller inserting view into wrong region

Question

I'm following Brian Mann's tutorial on building an application in Backbone + Marionette (~35min into Ep08), and I'm having problems with a controller inserting content into the main region rather than one of its sub-regions.

The page layout is structured like so:

<div id="header-region"></div>
<div id="main-region"></div>
<div id="footer-region"></div>

And I'm trying to insert content into an #admin-navs-region, which is to be nested under the #admin-list region inside of the #main-region:

<!-- admin/list/templates/list_layout; inserted into #main-region -->
<div id="admin-list">
  <div id="banner-region"></div>
  <div id="admin-navs-region"></div>
  <div id="article-region"></div>
</div>

The controller in question is as follows:

@PE.module "AdminApp.List", (List, App, Backbone, Marionette, $, _) ->

  class List.Controller extends App.Controllers.Application

    initialize: ->
      adminNavs = App.request "admin:nav:entities"

      @layout = @getLayoutView()

        @listenTo @layout, "show", =>  ## LINES IN QUESTION
          @bannerRegion()              ## LINE 11
          @listRegion adminNavs        ## LINE 12

        @show @layout

      bannerRegion: ->
        bannerView = @getBannerView()
        @show bannerView, region: @layout.bannerRegion

      listRegion: (adminNavs) ->
        listView = @getListView adminNavs
        @show listView, region: @layout.adminNavsRegion

      getListView: (adminNavs) ->
        new List.Navs
          collection: adminNavs

      getBannerView: ->
        new List.Banner

      getLayoutView: ->
        new List.Layout

And the corresponding view:

@PE.module "AdminApp.List", (List, App, Backbone, Marionette, $, _) ->

  class List.Layout extends App.Views.Layout
    template: "admin/list/list_layout"

    regions:
      bannerRegion: "#banner-region"
      articleRegion: "#article-region"
      adminNavsRegion: "#admin-navs-region"

  class List.Banner extends App.Views.ItemView
    template: "admin/list/_banner"

  class List.Nav extends App.Views.ItemView
    template: "admin/list/_nav"

    tagName: "li"

  class List.Navs extends App.Views.CollectionView
    tagName: "ul"
    className: "side-nav"
    itemView: List.Nav

When I comment out the LINES IN QUESTION (see 3rd code snippet), the list_layout is rendered properly within the #main-region. However, if I uncomment LINE 11 or LINE 12, #admin-list is being entirely replaced with the List.Banner or List.Nav templates, rather than inserting into the specified region.

Everything looks like it should be working to me, but instead of insertion into the correct region, the code is simply replacing everything inside of #main-region.

Does anyone know how to start debugging this?

Answer 1

Solved after realizing this is from some peculiar coffeescript / Backbone / Marionette interactions...

I'm using tabs (not spaces) to indent my coffeescript, and I had:

<tab> class List.Layout extends App.Views.Layout
<space><space><tab> template: "admin/list/list_layout"

For whatever reason, this doesn't break things but rather causes Marionette to render over the parent section. Fixed this by replacing the <space><space> with a <tab>:

<tab> class List.Layout extends App.Views.Layout
<tab><tab> template: "admin/list/list_layout"

Just one of those Mondays...