如何在ember.js中创建子窗口

Question

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

当点击“关闭”时，我希望subnav显示在主导航栏下方的白色水平条上。

由于导航代码位于应用程序模板中，我无法将subnav放在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')
});

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

我被困住了，我觉得我这样做太难了。

Answer 1

我会在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

的示例

Answer 2

这看起来很优雅！

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

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

});