0

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

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

我想知道的是，en-us无论您在哪条路线上，是否有任何方法可以以编程方式更改 URL 的一部分？到目前为止，我只运行 a 的问题transitionTo()是我无法知道当前位置的子路线是什么。

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

提前致谢！

编辑：

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

4

2 回答 2

0

好的，以下是如何将参数传递给控制器​​，然后在其上设置计算属性。

第一条路线

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 之前执行的。这只是稍后将其值传递给控制器​​的技巧。

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

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 中，以便在每个嵌套路由中轻松实现。然后 prop 更改后的重定向存储在 service 中，因此另一个 prop 如下所示：

params: Ember.computed.oneWay('localization.params'),
//inside redirect
this.transitionTo(...queryParams:{ this.get('params') } )....
于 2016-06-21T20:00:30.573 回答
-1

因此，经过大量的反复试验后，我决定在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
于 2016-06-21T22:10:00.663 回答