如何在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 show並隱藏了這個：

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')
});

當您單擊時，它可以工作，但當您點擊后退按鈕或導航到另一個頁面時，子窗口不會隱藏。

我被困住了，我覺得我這樣做太難了。

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

});