2

这里有两条路线，A 部分和 B 部分。B 部分有一个嵌套路线，称为 subsectionB。

当您单击“转到 B 小节”时，它应该显示 SECTION B ==>SUB SECTION B

但什么也没发生。A节内容仍然存在。RouteManager 中的日志记录表明它正在转换，但出口没有得到更新。怎么了？

这是小提琴：

http://jsfiddle.net/inconduit/hSpHK/2/

在下面我粘贴了应用程序代码。

<script type="text/javascript">
  App = Ember.Application.create({
    ready: function() {
      App.initialize();
    }
  });

  App.ApplicationController = Ember.ObjectController.extend();
  App.ApplicationView = Ember.View.extend({
      templateName: "application_view"
  });

  App.SectionAController = Ember.ArrayController.extend();
  App.SectionAView = Ember.View.extend({
    templateName: "section_a_view"
  });

  App.SectionBController = Ember.ObjectController.extend();
  App.SectionBView = Ember.View.extend({
    templateName: "section_b_view"
  });

  App.SubSectionB = Ember.ArrayController.extend();
  App.SubSectionBView = Ember.View.extend({
    templateName: "sub_section_b_view"
  })

  App.Router = Ember.Router.extend({

    enableLogging: true,

    root: Ember.Route.extend({        

      doSectionA    : function(router, event) { console.log('blah'); router.transitionTo('sectionA.index'); },
      doSubSectionB  : function(router, event) { router.transitionTo('sectionB.subSectionB.index'); },

      index: Ember.Route.extend({
          route: '/',
          redirectsTo: "sectionA.index"
      }),

      sectionA: Ember.Route.extend({
        route: '/sectionA',
        index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router, context) {
            router.get('applicationController').connectOutlet('sectionA');
          }
        })
      }),

      sectionB: Ember.Route.extend({
        route: '/sectionB',
        index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router, context) {
            router.get('applicationController').connectOutlet('sectionB');
          }
        }),
        subSectionB: Ember.Route.extend({
          route: '/subSectionB',
          index: Ember.Route.extend({
              route: '/',
              connectOutlets: function(router, context) {
                router.get('sectionBController').connectOutlet('subSectionB');
              }
          })
        })

      })

    })
  })
</script>
</head>
<body>

  <script type="text/x-handlebars" data-template-name="application_view">
  <a href="#" {{action "doSectionA"}}>go to section A</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" {{action "doSubSectionB"}}>go to subsection B</a>
    <div class="container">
        {{outlet}}
    </div>
  </script>
  <script type="text/x-handlebars" data-template-name="section_a_view">
    SECTION A
  </script>
  <script type="text/x-handlebars" data-template-name="section_b_view">
    SECTION B
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="sub_section_b_view">
    this is sub section B
  </script>


</body>
4

1 回答 1

4

点击“go to subsection B”查看路由器的日志：

STATEMANAGER: Sending event 'doSubSectionB' to state root. 
STATEMANAGER: Entering root.sectionB
STATEMANAGER: Entering root.sectionB.subSectionB
STATEMANAGER: Entering root.sectionB.subSectionB.index

路由器永远不会通过root.sectionB.index它加载sectionB的模板（它反过来包括subSectionB的出口）。因此，您需要确保通过将 sectionB 的模板放入root.sectionB路由中来加载它：

小提琴：http: //jsfiddle.net/ppanagi/hSpHK/4/

sectionB: Ember.Route.extend({
   route: '/sectionB',
   connectOutlets: function(router, context) {
      router.get('applicationController').connectOutlet('sectionB');
   },      

   index: Ember.Route.extend({
       route: '/',           
   }),

   // ...
})
于 2012-07-13T18:07:01.240 回答