2

鉴于这些模板

<script type="text/x-handlebars">
  <h3>Application outlet:</h3>
  <div class="outlet">
    {{outlet}}
  <div>

  <h3><code>'base'</code> outlet:</h3>
  <div class="outlet base-outlet">
    {{outlet 'base'}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h1>I am the application index, I should be in the application outlet.</h1>
</script>

<script type="text/x-handlebars" data-template-name="foo">
  <p>I am foo, I have my own outlet here:</p>
  <h3>Foo Outlet:</h3>
  <div class="outlet foo-outlet">  
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="foo/index">
  <p>I am foo index, I should be inside <code>#foo-outlet</code> (green border)</p>
</script>

这些路线：

App.Router.map(function() {
  this.resource('foo', function() {
    this.resource('bar');
  });
});

App.IndexRoute = Ember.Route.extend({ 
  afterModel: function() {
    this.transitionTo('foo.index');
  }
});

App.FooRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render({into: 'application', outlet: 'base'});
  }
});

我希望foo/index模板{{outlet}}在模板中呈现foo，但是它被呈现到应用程序出口中，这里有一个活生生的例子：http: //jsbin.com/yecatu/6/edit ?html,js,output

请注意，如果我调用this._super()inrenderTemplate我会foo/index在正确的位置得到那种，但foo模板会呈现两次。

更新：我想要达到的目标如下：

  1. 应用程序有一个命名的出口，比方说'sidebar'
  2. 路由可以将包装器渲染到包含其自己（未命名）出口的侧边栏出口中
  3. 然后该路由的子路由应呈现在包装器内的出口中。

所以在上面的例子中，foo路由应该将它的包装器渲染到'base'出口中，然后它的子路由的内容（foo/index在示例中）应该在该包装器内的出口中渲染（在示例中具有类foo-outlet的那个）。

4

0 回答 0