Javascript 我希望根据当前路线将多个变量切换为true或false
我希望根据当前路由将多个变量切换为true或false,控制器会在页面加载时检查当前路由Javascript 我希望根据当前路线将多个变量切换为true或false,javascript,jquery,ember.js,controller,handlebars.js,Javascript,Jquery,Ember.js,Controller,Handlebars.js,我希望根据当前路由将多个变量切换为true或false,控制器会在页面加载时检查当前路由 VpcYeoman.SuperTableController = Ember.ArrayController.extend({ routedToLocations: false, routedToUsers: false, currentPath: '/', checkCurrentPath: function() { if ( currentPath ==
VpcYeoman.SuperTableController = Ember.ArrayController.extend({
routedToLocations: false,
routedToUsers: false,
currentPath: '/',
checkCurrentPath: function() {
if ( currentPath == '/users')
this.set( 'routedToUsers', true )
} elsif ( currentPath == '/locations' ) {
this.set( 'routedToLocations', true )
}
});
superTable.hbs
{{#if routedToUsers}}
Users!
{{/if}}
{{#if routedToLocations}}
Locations
{{/if}}
在users.hbs中
{{render superTable model}}//这将导致字符串“Users!”代码>
在美国哈佛商学院
{{render superTable model}}//这将导致字符串“Locations!”代码>
或者,我可以在“用户”控制器中添加变量,如routedToUsers
,并设置值。看起来,
- users_controller.js -
routedToUsers: true,
canBeEdited: false,
canBeDeleted: true,
这样,每个超级表都有这些变量,除非它们已经预定义。另一个例子
- locations_controller.js -
routedToUsers: false, // this is obviously false but for example's sake
routedToLocations: true,
canBeEdited: false,
canBeDeleted: false,
因此,如果我在另一个页面上单击了一个链接到
,例如将我路由到“用户”,控制器将使用“检查当前路径
”来确保我确实在用户页面上 在您的应用程序中,确实存在两组主要的路径更改或“转换”
首先:Ember将初始化,路由器将用户转换到所需的上下文中。如果您有嵌套资源,这可能需要多次转换。如果用户返回嵌套资源或重新加载页面,则Ember是智能的,并将使用上下文重新加载。因此,自动转换
Second:用户可以根据您制作的任何UI在应用程序中进行转换
要解决两个问题中的第一个问题,您可能需要使用setupController
钩子初始化每个路由的控制器以激活currentPath
属性。这样,在页面加载时,路由将执行第一个setter,然后观察者将处理任何基于用户的路径更改
下面是一个通用路径观察者,您可以将其放置在应用程序控制器中它将解决两个问题中的第二个问题:
App.ApplicationController = Ember.Controller.extend({
needs: ['super-table', 'users', 'locations'],
currentPathDidChange: function () {
var path_base = this.get('currentPath').split('.')[0];
this.set('controllers.super-table.currentPath', path_base); // give your super table template the path
this.nullifyActiveFlags(); // You can write this yourself...
switch(path_base){ // just give me the base resource
case 'users':
this.set('controllers.users.activePath', true);
break;
case 'locations':
this.set('controllers.locations.activePath', true);
break;
}
}.observes('currentPath'),
//...
我可能会将该回调逻辑从observer中拉出来,放到它自己的方法中,但这只是一段伪代码,用于说明可能的情况
您还应该将超级表currentPath
setter重构为超级表控制器中的计算别名
如果需要任何其他解释,请告诉我!我已经多次使用过类似的模式,如果配置正确,它可以很好地工作。为了直接回答您的问题,undefined
在Javascript中是错误的,因此您实际上不需要显式地将其设置为false
。如果您想要一个通用函数将当前路径设置为true
,只需使用正则表达式即可。例如:
setCurrentPath: function() {
this.set(("routed_to_" + currentPath.match(/\/(.*)/)[1]).camelize(), true);
}
作为一个巨大的警告,我还要补充一点,你可能一开始就不应该这样做。一般来说,如果你发现自己在写作
if (isAThing) {
...
} else if (isAnotherThing) {
...
} else if (isYetAnotherThing) {
...
}
你可能会发现这个方法很有用
此外,在手柄中放置大量逻辑会降低性能,因为每次发生变化时,它都必须操纵DOM。如果需要逻辑,请将其保存在Javascript中,并最小化模板中的计算属性。如果更复杂,让你的路由器决定往插座里吐什么
在文本中传达语调真的很难,我希望我不会给人留下打你们的印象。我只是想把学到的教训传授给大家。祝你好运。“位置”和“用户”都是超级表控制器的用户,因此,将此答案中的代码添加到该控制器而不是应用程序控制器是否有意义?如果是这样的话,我就不需要在超级桌上叫“需要”,对吧?不currentPath
是应用程序控制器属性。您可以从任何位置调用controllers.application.currentPath
。。。所以我想你可以把这个观察者放在任何你想放的地方。不过,听起来这样很难保持干燥。没错,controllers.application.currentPath确实看起来有点长。你说我应该从currentPath的超级表控制器中计算别名是什么意思?您的意思是将currentPath:“”设置为类似currentPath:“/locations”或“/”的值吗?我已经在最后用几行代码更新了我的问题。我很抱歉没有尽快澄清这一点,但我使用render创建了超级表。我不确定这是否会改变什么。谢谢特拉维斯。这个答案同样有效!是的,我曾尝试为我的应用程序中使用列表的任何内容制作这个超级灵活的模板,它使用了大量的handlebar#if条件,根据当时的数据创建和销毁了该模板的各个方面。这有严重的性能问题。