Managing query parameters in controller within input


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({
     value: Ember.computed('search', function(){
         return this.get('search');
     actions: {
        filterByWord(param) {
         if (param.length === 1) {

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?


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)


Hi @armikhalev, what you have seems generally fine. You could look into doing something similar to, as well.