CODEWITHSUNDEEP
ember.js
benihana21
benihana21

Reputation: 168

Emberjs - need to refresh model on transtionTo

I have an Emberjs app that has a search action that needs to be available from all routes. To accomplish this, I've defined the 'search' action in the application route like this:

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        search: function (query) {
               this.transitionTo('search', { queryParams: { q: query } });
        }
    }
});

The 'q' querystring parameter is defined in the SearchController:

App.SearchController = Ember.ArrayController.extend({
    queryParams: ['q'],
    q: ''
});

The search route calls a service that queries my database with the query parameter like this:

App.SearchRoute = Ember.Route.extend({
    model: function (params) {
         return this.store.find('activity', { query: params.q }),
    }
});

I know that the model hook is not called on transtionTo, but when the user is already on the search page and wants to search again with a different query, I need to reload the search route with a new model.

Is using transitionTo in the application route the wrong approach in this case?

Any ideas are greatly appreciated!

Upvotes: 0

Views: 441

Answers (1)

yuяi
yuяi

Reputation: 2725

I would add a named {{outlet}} in your Application template, wherever you want the search results to appear. Then, in your Application route, inside the renderTemplate hook, I would render the search results template into the new outlet, also specifying what controller it should use.

On the controller, you can create a computed property, which would detect changes in the query string (or however you want to supply the search results). This property (or properties) would then feed the data in your search results template.

More on rendering a template inside a route:

http://emberjs.com/guides/routing/rendering-a-template/

If you decide to go with putting the renderTemplate hook in Application route, you can set the Search controller's model (or whatever you want to call it) property from any route which needs to update the model on the search controller for it to display proper results:

this.controllerFor('search').set('model', model);

You can also create a Mixin, which would contain the renderTemplate hook, which you can include in any route you want to do your searches from. In the hook, you could send your route's model into the controller:

renderTemplate: function(controller, model) {
  this.render('search', {
    into: 'search',
    outlet: 'application',
    controller: 'search',
    model: model
  });
}

Play around with some of these techniques. I'm sure I'm missing some details, but I think you can get them to work.

Upvotes: 1

Related Questions