Home/ Questions/Q 8217431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T12:28:01+00:00

there are two routes here, section A and section B. section B has a

  • 0

there are two routes here, section A and section B. section B has a nested route called subsectionB.

when you click “go to subsection B” it should display
SECTION B
==>SUB SECTION B

but nothing happens. the section A content remains. the logging in the RouteManager says its transitioning, but the outlet doesn’t get updated. what’s wrong?

here’s the fiddle:

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

and below i have pasted the app code.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at the log of the router when you click “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

    The router never passes through root.sectionB.index which loads the template for sectionB (which in turn includes the outlet for subSectionB). Therefore you need to ensure that the template for sectionB is loaded by placing it into the root.sectionB route:

    Fiddle: 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: '/',           
   }),

   // ...
})
    • 0