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れる内部でレンダリングされると予想されますが、アプリケーションのアウトレットにレンダリングされます。ここにライブの例があります: http://jsbin.com/yecatu/6/edit?html,js,output{{outlet}}foo

呼び出しを入れると、適切な場所に並べ替えられますが、テンプレートが 2 回レンダリングされることに注意this._super()renderTemplatefoo/indexくださいfoo

更新:私が達成しようとしているのは次のとおりです。

  1. アプリケーションには名前付きのアウトレットがあるとしましょう'sidebar'
  2. ルートは、独自の (名前のない) アウトレットを含むこのサイドバー アウトレットにラッパーをレンダリングできます。
  3. 次に、そのルートのサブルートは、ラッパー内のアウトレットでレンダリングする必要があります。

したがって、上記の例では、fooルートはそのラッパーを'base'アウトレットにレンダリングする必要があり、そのサブルート (例) のコンテンツは、そのfoo/indexラッパー (例のクラスfoo-outletを持つもの) 内のアウトレット内でレンダリングする必要があります。

4

0 に答える 0