Question

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

当您点击“转到B小节”时，它应该显示 B部分 ==＆gt; SUB B部分

但没有任何反应。 A部分内容仍然存在。 RouteManager中的日志记录表示其已过渡，但插座未更新。怎么了？

这是小提琴：

以下我已粘贴应用代码。

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

Answer 1

点击“转到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: '/',           
   }),

   // ...
})

为什么这个嵌套的余烬路线的出口不显示？

1 个答案: