Ember.js-僅在單擊時在application.hbs上顯示子導航，而無需呈現其他模板

Question

我在嘗試讓Subnav在Ember中顯示時遇到問題。 在我的應用程序模板中，我有一個導航欄，在根處有索引模板，它是一個完整的瀏覽器寬度模板，位於應用程序模板上導航欄的后面。 看起來像這樣：

我要發生的是單擊“關於”時，一個子導航顯示在主導航正下方的白色水平欄中。 白色的水平條也是應用程序模板的一部分。 那是頁面上唯一要更改的內容，盡管單擊了“ ABOUT”。 然后，當您單擊子導航上的項目時，說出“ STAFF”，它將呈現about.staff模板。

我的問題是在應用程序模板上發生這種情況。 因為如果用戶當前在“程序”模板上，然后他們單擊一下，則我希望用戶繼續在程序模板上，但是子導航仍下拉到主導航下方。

我已經嘗試過嵌套路線：

Ew.Router.map ->
  @.resource "about", ->
    @.route "philosophy"
    @.route "leadership"
    @.route "staff"
    @.route "affiliations"
  @.route "conditions"
  @.route "programs"
  @.route "testimonials"

然后我嘗試使用以下ApplicationRoute在應用程序hbs中渲染命名的插座

Ew.ApplicationRoute = Ember.Route.extend(
  renderTemplate: ->
    @.render
    @.render 'about',
        outlet: 'about',
        into: 'application'
)

但是我剛得到一個錯誤：

Error while loading route: TypeError {} ember.js?body=1:382
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined 

我想做到這一點而不必將大量的jquery拖入其中。 我希望這是有道理的，非常感謝您的幫助。

Answer 1

我設置sub nav的方式只是使用sub-nav.hbs模板和SubNavController來管理活動狀態。 我可以從我的主模板中進行渲染，如下所示：{{render'sub-nav'}}您可以在SubNavController中編寫代碼以確定要顯示的鏈接。 希望這有所幫助。

這是我的SubNavController。 這是針對“向導”流的，所以我不希望啟用所有鏈接。 （我也在使用Ember StateManager對象來管理我的應用程序的狀態。）

---

MyApp.SubNavController = Ember.Controller.extend({
  getAllStates: function() {
    return [
      { name: "start", label: "Start", active: true, enabled: true, href: "#/myapp/start"},
      { name: "drivers", label: "Driver", href: "#/myapp/driver"},
      { name: "vehicles", label: "Vehicle", href: "#/myapp/vehicle"},
      { name: "details", label: "Details", href: "#/myapp/details"}
    ];
  },

  init: function() {
    this.set('states', this.getAllStates());
    this.setActive();
  },

  setActive: function() {
    // TODO: Clean this up.  it's a little hacky.
    Ember.Logger.debug("current state: " + MyApp.stateManager.get('currentState.name'));
    var i = 0,
        newStates = this.getAllStates(),
        statesLength = newStates.length,
        activeIndex = 0;
    for (i=0; i< statesLength; i++) {
      newStates[i].active = false;
      if (newStates[i].name===MyApp.stateManager.get('currentState.name')) {
        newStates[i].active = true;
        activeIndex = i;
      }
    }
    for(i=activeIndex; i<statesLength; i++) {
      delete newStates[i].href;
    }
    this.set('states', newStates);
  }.observes('MyApp.stateManager.currentState')
});