Question

我的目标是追随者。我想要一个主导航菜单（导航车把）。在菜单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

尝试在{{outlet}}模板中添加menu3帮助程序，以显示其路径的资源。

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

<强> HBS

<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>

Emberjs subemenu菜单中

1 个答案: