3

这个问题困扰了我好几天。当用户访问“关于”页面时，我需要在应用程序模板的主导航下显示一个子导航。我觉得我一定遗漏了一些重要的概念，因为我一直在阅读，如果在 Ember 中很难做某事，那么你可能做错了。而且我觉得 Ember 应该能够轻松处理简单的子导航。

在此处输入图像描述

当单击“关于”时，我希望子导航显示在主导航下方的瘦白色水平条上。

由于导航代码位于应用程序模板中，因此我无法将子导航放在 about 模板中。

我的路由器：

App.Router.map(function() {
  this.resource("about", function() {
    this.route("philosophy");
    this.route("leadership");
    this.route("staff");
    this.route("affiliations");
  });

  this.route("conditions");
  this.route("programs");
  this.route("testimonials");
});

我无法在应用程序模板中呈现部分内容，因为我只希望它在有人位于 /about url 时显示。

我已经尝试过普通的旧 jQuery 显示和隐藏：

App.ApplicationController = Ember.ObjectController.extend({
  currentRouteChanged: function() {
    if(this.get('currentRouteName').indexOf('about') > -1) {
      $("ul").removeClass("sub-nav-list-hide");
      $("ul").addClass("sub-nav-list-show");
    }
  }.observes('currentRouteName')
});

当您单击 about 时它会起作用，但是当您单击后退按钮或导航到另一个页面时 subnav 不会隐藏。

我被困住了，我觉得我让这种方式太难了。

4

2 回答 2

4

我会在 App.AboutRoute 中的应用程序控制器中设置一个属性

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

然后检查应用程序模板中的属性。

{{#if renderAboutSubNav}}
  {{render 'about/subnav'}}
{{/if}}

这是一个示例jsbin

于 2013-08-29T19:43:06.070 回答
2

这对我来说看起来很优雅！

我们可以在应用程序控制器中做类似的事情。

App.ApplicationController=Ember.Controller.extend({
    renderAboutSubNav:function(){
        var reg = new RegExp("^about\.");
        return reg.test(this.get('currentPath'));
     }.property('currentPath')

});
于 2013-08-29T20:02:11.030 回答