Query params does not work with computed property

[bakura10]

Hi,

I have a case when I use Date objects as query params. However, I want them to be shown in day format (YYYY-mm-dd) in the URL. As Ember does not have any way (or did I miss it?) to deserialize an object when outputted as a URL, I'm forced to using a computed property, however it does not seem to work.

I've written a reproducible JSBin that shows the problem (on Ember 1.8.1): http://emberjs.jsbin.com/qijorojoci

[stefanpenner]

yes this is a known issue currently.

cc @machty

[machty]

@bakura10 you can't use computer properties as QP default values. We may add something similar to such functionality soon but in the meantime you can try overriding the following methods either via Route.reopen or within the route that will be (de)serializing the date query param: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/system/route.js#L270-L303

[bakura10]

I discovered thsoe two methods after posting this issue, and it works like a charm ;).

[machty]

👍

[kamalaknn]

Having troubles with this. In my case I have a queryParam composed with two controller properties (JSBin). Cant use serializeQueryParam and deserializeQueryParam here. Any suggestions for such cases ?

[alvinvogelzang]

@machty for serializing your suggestion works perfect but are there already plans to use real computed properties for queryParams? Would be much cleaner then using the observer to set static properties.

[machty]

@alvinvogelzang some of the particulars of query params need to be reworked for Ember 2.0, particularly w.r.t routeable components, and I don't expect that Ember 1.x will see real computed property support for query params.

[alvinvogelzang]

@machty fair enough, thanks :)

[knownasilya]

What's the status on this? QPs seem to work for one of my CPs, but a second one that depends on the same array isn't being updated on subsequent changes to the array.

[knownasilya]

This is an unfortunate bug, because a user expects it to just work, and they spend so much time tracking down what the issue is.

[machty]

@knownasilya can you paste in some sample code of the QP/CP properties?

[knownasilya]

@machty not sure if this is exactly the case that I was working with.. http://ember-twiddle.com/14de93b88b739b0495a3

[btecu]

Ran into this and spent a lot of time because I was just get a blank page and no error or warning. My computed property used to work under <= 1.13.x but it breaks under >= 2.x.

[rich-poole]

Depending on your situation, you may be able to do this in reverse. I am using a CP that is based on the query param. In my case, I am using pikaday which needs a JS Date but I want an ISO8601-style date in the URL. I could probably avoid using moment but it helps with the native Date timezone issues.

startDateTo: '',
startDateToJSDate: Ember.computed('startDateTo',{
    get(key) {
      return this.get('startDateTo') ? moment(this.get('startDateTo')).toDate() : null;
    },
    set(key, value) {
        this.set('startDateTo', value ? moment(value).format('YYYY-MM-DD') : '');
        return value;
    }
})

[aldhsu]

I ran into this problem as well in Ember >= 1.13 when using ember-cli-bootstrap-datepicker. My solution was to set the query params with actions and have a property compute off the QPs that turned it back into a date object. Any initialization can be done in the route setupController(controller , model, transition), transition is an object that contains the QPs hash. This isn't documented in the Ember guide.

[nightire]

@Ricky1981 You're on the right track but not complete, I write a simple example to show various situations based on your solution: https://ember-twiddle.com/6355950e9d06d9f83349

[rich-poole]

We'll have to agree to disagree @nightire as I prefer my own implementation.

[Joelkang]

@Ricky1981 that was my solution too, except I needed to get the id from a model as the query param, but pass the actual model from my component to my controller (the CP was basically a store.peekRecord). Would be nice to be able to do this with both CPs and DS.Models but alas, that's a not-terrible workaround.

[shelby-carter]

Another one working solution here https://discuss.emberjs.com/t/passing-dynamic-query-params-as-an-object-in-link-to-helper/9136/3