我想要多个变量切换为真或假取决于当前的路由

I want multiple variables toggled as true or false depending on the current route

本文关键字：取决于 路由 变量 我想要      更新时间：2023-09-26

我希望多个变量根据当前路由切换为true或false，控制器在页面加载时检查该路由。

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}} //which will result in the string 'Users!'

位置。哈佛商学院

{{render superTable model}} //which will result in the string '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,

因此，如果我在另一个将我路由到"用户"的页面上单击#link-to，控制器将使用"checkCurrentPath"来确保我确实在用户页面上。

在你的应用程序中有两组路径更改或" transitions "。

First: Ember将初始化，路由器将把用户转换到所需的上下文。如果您有嵌套的资源，这可能需要多次转换。如果用户返回到嵌套的资源或重新加载页面，Ember是智能的，它会根据上下文重新加载。因此，自动转换。

Second:用户可以根据你设计的UI在应用程序中切换。

要解决两个问题中的第一个，您可能需要初始化每个路由的控制器以激活currentPath属性，使用setupController钩子。这样，在页面加载时，路由将执行第一个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'),
//...

我可能会把回调逻辑从观察者中拉出来，放到它自己的方法中，但这只是伪代码，用来展示什么是可能的。

您还应该将超级表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) {
  ...
}

你可能会发现命令模式或责任链模式很有用。

另外，在Handlebars中放置大量逻辑会降低性能，因为每次有变化时，它都必须操作DOM。如果您需要逻辑，请将其保存在Javascript中，并尽量减少模板中的计算属性。如果比这更复杂，让你的路由器决定要输出什么到一个出口。

在文字中表达语气真的很难，我希望我不会让你觉得我在打你。我只是想传递一些来之不易的教训。好运。

相关文章：