Question

我正在尝试将计算属性（或通过观察者更改）绑定到iso路由中的locale动态段。我所拥有的路由器代表：

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

会产生如下网址：

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

我想知道的是，无论您使用哪条路线，是否有任何方式以编程方式更改网址的en-us部分？到目前为止我刚刚运行transitionTo()的问题是我无法知道当前位置的子路由是什么。

基本上，我需要一种方法将en-us段绑定到我可以自动更新URL的计算属性。

提前致谢！

修改

为了进一步说明，我正在寻找一种在属性更改时更新网址细分的方法。像这样：

导航至：http://localhost:4200/en-us/products
服务电话this.set('locale', 'fr-ca')
路由检测到更新的service.locale属性
网址已更新为：http://localhost:4200/fr-ca/products

Answer 1

好的，以下是如何将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刷新模型 - 当它被改变时模型将重新加载。这是可选的。同样在这条路线上，我创建了一个属性iso来存储它的值，因为模型是在setupController之前执行的。这只是稍后将其值传递给控制器的技巧。

现在你有从params到控制器的值iso，从那里你可以从这个值创建一个计算属性。像这样：

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
}

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

请注意这是否是您想要的，但我希望它有所帮助。让我知道......

修改

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

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，以便在每个嵌套路径中轻松实现。然后改变道具后的重定向存储在服务中，所以另一个道具如下：

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

Answer 2

所以在经过了大量的反复试验之后，我决定在路由器上使用replaceWith()并使用正则表达式将旧的iso替换为新的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

绑定到动态路径段

2 个答案: