0

Ember にサブ ナビゲーションを実装する最善の方法は何なのか、興味がありました。application.hbs には、「about」、「programs」などのメイン ナビゲーションがあります。「about」をクリックすると、メイン ナビゲーションのすぐ下の行にページの別のリストが表示されます。私は既に application.hbs 内で {{outlet}} を使用しているため、サブナビを表示したい場所に別のものを配置することはできません。

ここに私が持っているものがあります:

<div class="row left-nav">
  {{#linkTo "index"}}<img class="ew_logo" src="assets/ew.png">{{/linkTo}}
</div>
<div class="row nav">
  <div class="large-12 colummns">
    <ul class="inline-list top-nav">
            <li><h6>ABOUT</h6></li>
            <li><h6>//</h6></li>
            <li><h6>CONDITIONS</h6></li>
            <li><h6>//</h6></li>
            <li><h6>PROGRAMS</h6><li>
            <li><h6>//</h6></li>
            <li><h6>TESTIMONIALS</h6></li>
    </ul>
  </div>
</div>
<div class="row subnav">
    <div class="large-12 colummns">
             // Would like SUBNAV to display here
    </div>
</div>
{{outlet}}
4

1 に答える 1

1

名前付きアウトレットを使用し、ルートの関数にフックして、ルートを適切な場所にレンダリングできます。簡単なデモrenderTemplateについては、こちらを参照してください。（申し訳ありませんが、スタイルは明らかにねじ込まれています）

たとえば、名前付きアウトレットがindexテンプレート内にある場合、次のことができます。

インデックス テンプレート

...
<div class="row subnav">
  <div class="large-12 colummns">
    {{outlet 'subnav'}}
  </div>
</div>
...

サブナビ テンプレート

<script type="text/x-handlebars" id="subnav">
  <h2>Hello I'm Subnav!</h2>
</script>

インデックス ルート

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render(); // this renders the index template per se
    // and this additional call renders the subnav template into the named outlet
    this.render('subnav', { //the name of your template
      outlet: 'subnav', //the name of the named outlet
      into: 'index' //the name of the template where the named outlet should be rendered into
    });
  }
});

上記のようにレンダリングする限り、どのルートにいても、名前付きアウトレットを好きなだけ持つことができることに注意してください。

それが役に立てば幸い。

于 2013-08-27T19:03:45.450 に答える