我在尝试在Ember点击时显示子节点时遇到问题。在我的应用程序模板中,我有一个导航栏,在根目录中我有索引模板,它是位于应用程序模板上导航栏后面的完整浏览器宽度模板。看起来像这样:
我想要发生的是当点击'ABOUT'时,子导航显示在主导航正下方的白色水平条上。白色水平条也是应用程序模板的一部分。当点击“关于”时,这是我想要改变的页面上唯一的东西。然后,当您单击子窗口上的项目时,请说“STAFF”,它将呈现about.staff模板。
我的问题是在应用程序模板上发生这种情况。因为如果用户当前在“PROGRAMS”模板上,然后他们点击了,我希望用户留在程序模板上,但是subnav仍然会下拉到主导航下方。
我尝试过嵌套路线:
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。我希望这是有道理的,我真的很感激任何帮助。
答案 0 :(得分: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')
});