Backbone / Marionette控制器将视图插入错误的区域

时间:2014-02-03 19:39:38

标签: backbone.js marionette backbone-views

我正在关注Brian Mann关于在Backbone + Marionette中构建应用程序的教程(在Ep08中约35分钟),并且我遇到控制器将内容插入主区域而不是其子区域的问题。 / p>

页面布局的结构如下:

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

我正在尝试将内容插入到#admin-navs-region中,该#admin-list将嵌套在#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> 区域内:

@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

当我发表评论list_layout时(请参阅第3段代码段),#main-region会在LINE 11内正确呈现。但是,如果我取消注释LINE 12#admin-listList.Banner将完全替换为List.Nav#main-region模板,而不是插入指定的区域。< / p>

一切看起来应该对我有用,但代码不是插入正确的区域,而是简单地替换{{1}}内的所有内容。

有谁知道如何开始调试这个?

1 个答案:

答案 0 :(得分:0)

在意识到这是来自某些特殊的coffeescript / Backbone / Marionette互动后解决了......

我正在使用制表符(而不是空格)来缩进我的coffeescript,我有:

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

其中一个星期一......