[英]Ember.js - having a subnav display on application.hbs on click only without rendering a different template
我在尝试让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拖入其中。 我希望这是有道理的,非常感谢您的帮助。
我设置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')
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.