Ember.js 绑定到动态路由段

我正在尝试将计算属性（或通过观察者更改）绑定到

locale

路由中的

iso

动态段。我拥有的路由器由以下内容表示：

this.route('locale', { path: '/:iso' }, function(){
    this.route('products', function() {
        this.route('single', { path: '/:id/:seoName' });
    });
});

这会产生如下URL：

http://localhost:4200/en-us
http://localhost:4200/en-us/products
http://localhost:4200/en-us/products/123/product-name

export default Ember.Controller.extend({
  iso: null, //it will be set by its router
  isoComputed: Ember.computed('iso', function() {}) //do here a computed based on iso prop
}

params: Ember.computed.oneWay('localization.params'),
//inside redirect
this.transitionTo(...queryParams:{ this.get('params') } )....

我想知道的是，是否有任何方法可以通过编程更改URL的

en-us

部分，无论您在哪条路线上？到目前为止，我只运行一个

transitiono（）

的问题是，我无法知道当前位置的子路由是什么

基本上，我需要一种将

en-us

段绑定到计算属性的方法，该属性可以在URL更改时自动更新

提前谢谢

编辑：

为了进一步澄清，我正在寻找一种在属性更改时更新URL段的方法。大概是这样的：

http://localhost:4200/en-us
http://localhost:4200/en-us/products
http://localhost:4200/en-us/products/123/product-name

export default Ember.Controller.extend({
  iso: null, //it will be set by its router
  isoComputed: Ember.computed('iso', function() {}) //do here a computed based on iso prop
}

params: Ember.computed.oneWay('localization.params'),
//inside redirect
this.transitionTo(...queryParams:{ this.get('params') } )....

• 导航到：
• 服务调用this.set（'locale'，'fr ca'）
• 路由检测更新的

  service.locale

  属性
• URL已更新为：

---

好的，下面是如何将param传递给控制器，然后在此基础上设置计算属性

第一条路线

export default Ember.Route.extend({
  iso: null,
  queryParams: {
    iso: {
      refreshModel: true
    }
  },
  model(params) {
    this.set('iso', params.iso);
    return this.store.query('product', params); // do your query here to fetch products based on iso or whatever
  },
  setupController(controller, model) {
    controller.set('iso', this.get('iso'));
  }
});

所以我在这里所做的-我制作了param iso refresh模型-当它被更改时，模型将重新加载。这是可选的。同样在这个路径上，我创建了一个属性iso来存储它的值，因为模型是在setupController之前执行的。这只是稍后将其值传递给控制器的一个技巧

现在，您已经将值iso从params输入到控制器中，从那里您可以根据该值创建计算属性。大概是这样的：

http://localhost:4200/en-us
http://localhost:4200/en-us/products
http://localhost:4200/en-us/products/123/product-name

export default Ember.Controller.extend({
  iso: null, //it will be set by its router
  isoComputed: Ember.computed('iso', function() {}) //do here a computed based on iso prop
}

params: Ember.computed.oneWay('localization.params'),
//inside redirect
this.transitionTo(...queryParams:{ this.get('params') } )....

这是一种从路由器参数传递到控制器和控制器内部集合的方法，您可以在模板中使用该集合

请注意，如果这是你想要的，但我希望它能有所帮助。让我知道

编辑

你最新的问题更有意义。我认为您可以在服务上有一个计算属性，并在它被更改后执行重定向，所以类似这样

export default Ember.Controller.extend({ //you can do this on a route or controller
localization: Ember.inject.service('localization'),
locale: Ember.computed.oneWay('localization.locale'),
redirect: Ember.computed('locale', function() {
   let locale = this.get('locale');
   if(locale === "fr-FR") {
     this.transitionTo('products', { queryParams: { iso: 'fr-FR' }}); //you can redirect to whatever
   }
})

}

编辑2：

经过更多思考，服务对象应该存储转换值。此部分应移动到Mixin，以便在每个嵌套路由中易于实现。然后，道具更改后的重定向存储在服务中，因此另一个道具如下所示：

http://localhost:4200/en-us
http://localhost:4200/en-us/products
http://localhost:4200/en-us/products/123/product-name

export default Ember.Controller.extend({
  iso: null, //it will be set by its router
  isoComputed: Ember.computed('iso', function() {}) //do here a computed based on iso prop
}

params: Ember.computed.oneWay('localization.params'),
//inside redirect
this.transitionTo(...queryParams:{ this.get('params') } )....

---

因此，在经历了大量荒谬的尝试和错误之后，我决定在路由器上使用正则表达式进行

replaceWith（）

，以替换新的iso。我的结局是：

/**
 * Locale changed
 *
 * @return  {null}
 */
localeChanged: function(){
    const locale = this.get('i18n.locale');
    const router = this.get('routing.router');

    var pathname = location.pathname.replace(/^\/[a-z]{2}-[a-z]{2}\//gi,'/' + locale + '/');
    router.replaceWith(pathname);
}.observes('i18n.locale').on('init')

然后获取完整URL并相应重定向，其中：

http://localhost:4200/en-us/products/category/6/best-sellers
http://localhost:4200/en-us/products

变成

http://localhost:4200/fr-ca/products/category/6/best-sellers
http://localhost:4200/fr-ca/products

---

您的路由中是否为iso参数定义了refreshModel:true？我可以提供一个基于iso将计算属性传递给控制器的示例，但这是您想要的吗？@mirzammic no？你能举个例子吗？这听起来很有希望：作为后续，这不是针对指定为

？iso=en us

的查询参数，而是针对URL本身中的实际路由段。我稍后看到了您的评论，但您可以将此逻辑用于您在路由中定义的任何参数。这里的诀窍是，在只是一个余烬对象的路由上，我临时存储从模型内的参数读取的值，然后传递给setupController中的控制器。在控制器道具上计算的设置很容易，对，从URL->Property开始工作。我需要的是属性->URL。我在OP中添加了更多的注释。希望这是有意义的：）谢谢这更接近了，但是嵌套路由不起作用。例如，如果我们在：

http://localhost:4200/en-us/products/123/product name

和区域设置更改后，我需要能够保留URL的其余部分，只需将

en us

更新为新值即可。也就是说，

transitiono（）

路由将是可变的，这取决于我们在哪个路由上……嗯，我将尝试创建一个Mixin对象，该对象根据注入的服务进行重定向。所以您可以将这个mixin添加到嵌套路由中，但我认为服务对象应该存储完整的重定向值。因此，请将转换值存储在SDE服务对象中，以便执行正确的重定向？此实现使用的是观察者。不建议使用它们，因为它们仅用于内部api.False。观察员是最新余烬记录指南的一部分。它们不仅仅是内部的。计算属性在这里不合适，因为该属性永远不会被访问，因此计算永远不会发生。由于这不是任何事物的属性，观察者观察变化并对其采取行动更有意义。如果您查看Ember doc的状态，仅供参考“观察员经常被新的Ember开发者过度使用。观察者在Ember框架本身中大量使用，但对于Ember应用程序开发人员面临的大多数问题，计算属性是合适的解决方案。“。这直接来自文件。我还建议你看看这段视频，它基本上解释了我的观点。但是你想用什么就用什么。我只是想帮忙。干杯。如果我表现得像是在直接攻击你，我道歉，那不是我的本意。我非常感谢您的帮助，但是该视频不适用于这里的用例？计算属性专门用于更改和/或依赖于其他值返回内容的值。视频讨论的所有用例都是关于使用观察者设置属性的，这不是我在这里要做的。我想也可以将

localeChanged

转换为计算属性，然后在

init（）

中对其执行

.get（）

操作，但当您可以观察它时，这不是多余的吗？也许我遗漏了什么？