why doesn't the outlet of this nested ember route display?
===

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>

