0

我在尝试在 Ember 中单击时显示子导航时遇到问题。在我的应用程序模板中，我有一个导航栏，在根目录下我有一个索引模板，它是一个完整的浏览器宽度模板，位于应用程序模板的导航栏后面。看起来像这样：

在此处输入图像描述

我想要发生的是当单击“关于”时，子导航显示在主导航正下方的白色水平条上。白色水平条也是应用程序模板的一部分。这是页面上唯一要更改的内容，尽管单击“关于”时。然后，当您单击子导航上的项目时，说“员工”时，它会呈现 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 破解进去。我希望这是有道理的，我非常感谢任何帮助。

4

1 回答 1

1

我设置子导航的方式只是使用 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')
});
于 2013-08-28T19:29:56.927 回答