javascript - 菜单中的 Emberjs 子菜单

Question

我的目标是追随者。我想要一个主导航菜单(导航 Handlebars )。在菜单 3 中，我想要一个包含两个子菜单(menu3.submenu1 和 menu3.submenu2)的菜单。

App = Ember.Application.create();

App.Router.map(function() {
  this.route("menu1", { path: "menu1" });
  this.route("menu2", { path: "menu2" });
  this.resource('menu3', function() {
    this.resource('menu3.submenu1', { path: '/submenu1' });
    this.resource('menu3.submenu2', { path: '/submenu2' });
  });

});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.NavigationView = Ember.View.extend({
  templateName: 'navigation'

});

模板:

  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>
    {{view App.NavigationView}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">

  </script>
    <script type="text/x-handlebars" data-template-name="navigation">
            <ul id="navigation">
                {{#link-to "menu1" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 1</a>
                {{/link-to}}       
                {{#link-to "menu2" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 2</a>
                {{/link-to}}
                {{#link-to "menu3" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 3</a>
                {{/link-to}}                          
            </ul>    
  </script>
      <script type="text/x-handlebars" data-template-name="menu2">
  Menu 2
  </script>
        <script type="text/x-handlebars" data-template-name="menu3">
                 {{#link-to "menu3.submenu1" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 3-1</a>
                {{/link-to}}
                 {{#link-to "menu3.submenu2" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 3-2</a>
                {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="menu3/submenu1">
  Menu 3 == submenu1
  </script>

我整理了一个 jsbin:http://emberjs.jsbin.com/mehabivu/2/edit

Answer 1

尝试在 menu3 模板中添加一个 {{outlet}} 助手来显示其路由的资源。

例子， http://emberjs.jsbin.com/mehabivu/5/edit

健康管理系统

<script type="text/x-handlebars" data-template-name="menu3">
                 {{#link-to "menu3.submenu1" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 3-1</a>
                {{/link-to}}
                 {{#link-to "menu3.submenu2" tagName="li"}}
                    <a {{bind-attr href="view.href"}}>Menu 3-2</a>
                {{/link-to}}

                {{outlet}}
  </script>