骨干/木偶控制器将视图插入错误区域答案

【问题标题】：Backbone / Marionette controller inserting view into wrong region骨干/木偶控制器将视图插入错误区域
【发布时间】：2014-02-03 19:39:38
【问题描述】：

我正在关注 Brian Mann 的关于在 Backbone + Marionette 中构建应用程序的教程（第 08 集约 35 分钟），但我遇到了控制器将内容插入主区域而不是其子区域之一的问题。

页面布局结构如下：

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

我正在尝试将内容插入到#admin-navs-region 中，该#admin-navs-region 将嵌套在#main-region 内的#admin-list 区域下：

<!-- 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>

有问题的控制器如下：

@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

以及对应的视图：

@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

当我注释掉 LINES IN QUESTION（参见第三个代码 sn-p）时，list_layout 会在 #main-region 中正确呈现。但是，如果我取消注释 LINE 11 或 LINE 12，#admin-list 将完全替换为 List.Banner 或 List.Nav 模板，而不是插入到指定区域。

一切看起来都应该对我有用，但代码并没有插入正确的区域，而是简单地替换了#main-region 中的所有内容。

有人知道如何开始调试吗？

【问题讨论】：

标签： backbone.js marionette backbone-views

【解决方案1】：

在意识到这是来自一些特殊的咖啡脚本/骨干/木偶互动后解决...

我使用制表符（而不是空格）来缩进我的咖啡脚本，我有：

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

无论出于何种原因，这不会破坏事物，而是会导致 Marionette 渲染父部分。通过将<space><space> 替换为<tab> 来解决此问题：

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

只是其中一个星期一...

【讨论】：