Ember Restore State when Routing

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/27724634/ember-restore-state-when-routing

标签

ember.js

ember-router