2016-06-21 199 views
0

我试图绑定计算属性(或通过观察者更改)locale路由中的iso动态段。绑定到动态路由段

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 

什么我不知道是如果有任何办法以编程方式更改URL的en-us部分没有你在哪条路线上?到目前为止,我刚刚运行transitionTo()的问题是,我无法知道当前位置的子路线是什么。

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

在此先感谢!

编辑:

为了进一步澄清,我正在寻找一种方式来更新URL段当一个属性更改。事情是这样的:

+0

你有你的路线refreshModel:为ISO真正定义PARAM?我可以提供一个基于iso传递计算属性给控制器的例子,但这是你想要的吗? –

+0

@MirzaMemic no?你能举个例子吗?这听起来很有希望:D – ShadowPuppet

+0

作为后续工作,这不是查询参数指定为'?iso = en-us',而是针对URL本身中的实际路径段。 – ShadowPuppet

回答

0

好了,这里是你如何能将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之前执行。这只是后来将其价值传递给控制器​​的一个技巧。

现在你已经从参数值控制器,从那里你可以从这个值创建一个计算属性。事情是这样的:

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传递给控制器​​和内部控制器设置的计算机,你可以在你的模板中使用的一种方式。

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

编辑

您更新的问题更有意义。我想你可能会对服务计算的属性,并将其改变后进行重定向,所以像这样

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') }).... 
+0

我后来看到您的评论,但您可以将此逻辑用于您在路由中定义的任何参数。这里的技巧是在Route上,它只是一个支持对象,我临时存储的值是从模型中的params中读取的,然后传递给setupController中的控制器。之后,在控制器prop上计算出来的设置很容易, –

+0

正确的作品从URL - > Property。我需要的是Property - > URL。我已向OP添加了更多注释。希望这是有道理:)谢谢 – ShadowPuppet

+0

更接近,但它不会与嵌套的路线。例如,如果我们位于:'http:// localhost:4200/en-us/products/123/product-name'并且语言环境发生变化,我需要能够保留URL的其余部分并更新'en -us'到新值。即'transitionTo()'路线会根据是可变的我们是在哪条路线... – ShadowPuppet

-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 
+0

该实现使用观察者。不建议使用它们,因为它们仅用于内部API。 –

+0

错误。观察者是最新Ember文档指南的一部分。他们不只是内部的。 https://guides.emberjs.com/v2.6.0/object-model/observers/ 作为属性从未访问,因此计算不会出现的一个计算的属性不适合这里。由于这不是任何事物的属性,观察者更有意义地观察变化并采取行动。 – ShadowPuppet

+0

只为参考,如果你看一下灰烬DOC它指出“观察家往往是过度使用新的灰烬开发。观察家们大量使用灰烬框架本身,但灰烬应用程序开发人员面临的大多数问题,计算性能是合适的解决方案“。这是直接来自文档。我也建议你看看这个视频https://www.youtube.com/watch?v=7PUX27RKCq0这基本上解释了我的观点。但你可以使用任何你想要的。我只是想帮忙。干杯。 –