2

ここには、セクション A とセクション B の 2 つのルートがあります。セクション B には、subsectionB というネストされたルートがあります。

「サブセクションBに移動」をクリックすると、セクションB ==>サブセクション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

「サブセクション B に移動」をクリックして、ルーターのログを見てみましょう。

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

sectionB のテンプレートをロードするルーターは通過しませんroot.sectionB.index(これには、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 に答える