Ember Restore State when Routing

Question

I have a application controller with a input bound to searchTerms and on click I am routing to search-results route. The code is from a book

Rocknrollcall.Router.map(function() {
    // Add your routes here
    this.route('search-results', {
        path: 'search/:term'
    });

  });

});

Rocknrollcall.ApplicationController = Em.ObjectController.extend({ searchTerms: '', actions: { submit: function() { this.transitionToRoute('search-results',this.get('searchTerms')); } } });

In the route I am returning some data I am rendering in search results

Rocknrollcall.SearchResultsRoute = Ember.Route.extend({
  model: function (query) {
     // ajax call
     return {artists: artists, songs: songs}
   });

}

});

Everything works fine. If I go from index and enter say tom I go to this URL "http://localhost:9000/#/search/tom" with all data.

However the point is when I put the URL directly in browser I do get the data. But the search term input box in the application template is empty. I would like to populate that also somehow. My question is what is the best solution to do so in Ember properly?

Let's try to elaborate a bit. The search term input is in application template

                <script type="text/x-handlebars" data-template-name="application">
                      {{input action="submit" type="text" class="search-input" placeholder="Search for artists or song names" valueBinding="controller.searchTerms"}}               
                       <button {{action "submit"}} class="btn btn-primary"></button>
                      {{outlet}}
                </script>

Now if the user kind of bookmarks the URL with the search term and comes back the outlet is properly rendered by going through the route model. However the search term input which is bound to a variable in the application controller is empty because I did not restore it . I would like to know how to restore the input in the application template with the search term in URL when directly going to "http://localhost:9000/#/search/tom"? Or Is it a good idea to move the input to the child template in this case artists that is rendered in the outlet?

JSBin URL: http://jsbin.com/kopovikibi/1/edit?html,js,output

@KalmanHazins I can put in jsbin. But I don't know if you can put a URL there manually like we can do it browser so it is possible to see what the issue is. — sajid sharlemin
@sajid.db you can manually put a URL in, you just need to click out the "Output" panel — Kalman

Kalman Kalman · Accepted Answer · 2014-12-31T21:53:37

In your model hook, right before your return the JSON data, just call

this.controllerFor("application").set("searchTerms", query.term);

This will modify the textfield in the application template, because it is bound to the searchTerms property of your application controller.

Working solution here

Ember Restore State when Routing

1 Answers