为什么不显示此嵌套余烬路由的出口？

这里有两条路由，A部分和B部分.B部分有一个名为SubsectionB的嵌套路由。

当您单击"转到B小节"时，它应该显示B节==>子部分 B

但什么也没发生。保留部分 A 内容。路由管理器中的日志记录显示其转换，但出口未更新。怎么了？

这是小提琴：

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>

单击"转到B小节"时，请查看路由器的日志：

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

路由器永远不会通过加载部分 B 模板的root.sectionB.index(而 B，而模板又包括子部分 B 的出口(。因此，您需要通过将 Section B 的模板放入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: '/',           
   }),
   // ...
})

相关内容

最新更新

热门标签：