Managing query parameters in controller within input

Learning Team
1

I was following this tutorial to get input in a language translation app updating URL, something like Google Translate does. But I don’t want every letter in the input box to be bound with URL, because user wouldn’t want to go by one letter back if he/she clicks the browser back button, better user experience would be if he/she goes to the previous word by one click - and that is what I am trying to achieve.

What have I tried: I added separate ‘value’ computed property which gets value from another ‘search’ property. Better to show code snippet:

export default Ember.Controller.extend({
     queryParams:['search'],
     search:"",
     value: Ember.computed('search', function(){
         return this.get('search');
      }),
     actions: {
        filterByWord(param) {
        ...
         if (param.length === 1) {
            this.setProperties({search:param});
         }
        ... 
     } 
});

Then in template:

{{input value=value}}

I omitted the details but essentially, now if a user goes to the URL like “http://translator/english?word=ember”, my app will render the word and trigger the action giving the search result. However, if I click the back button, though it goes back to the previous url, it doesn’t trigger the action and, as a consequence, doesn’t update the search, because ‘search’ is undefined on route change.

So my question is - what is the best, Ember way to make my ‘search’ parameter to be bound with URL, but having more control over the value which goes to the query parameters?

2

Query params are a bit annoying, lucky clever people made a useful addon! Ember Parachute gives you a lifecycle style API to make dealing with query params and state much nicer (see demo)

3

Hi @armikhalev, what you have seems generally fine. You could look into doing something similar to GitHub - poteto/ember-changeset: Ember.js flavored changesets, inspired by Ecto, as well.