Correct way to transitionToRoute

Question

I'm making a live search on ember.js. This is the code

App.Router.map ->
    @resource "index", {path : "/"}
    @resource "index", {path : "/:query"}

App.Torrents =
    findByQuery : (query) ->
        url = "/api/find/#{query}"
        $.getJSON(url)

App.IndexRoute = Ember.Route.extend

    model : (params) ->
        App.Torrents.findByQuery(params.query)

App.IndexController = Ember.ArrayController.extend

    onChangeQuery : _.debounce(->
        query = @get("query")
        @transitionToRoute("index", {query  : query})
    , 500).observes("query")

I have a query property binded to an input. When the input change I want to transition to the route passing the new query parameter, but the IndexRoute.model method is not being called.

Answer 1

The reason IndexRoute.model method not being called. is

A route with a dynamic segment will only have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), then a model context is already provided and the hook is not executed. Routes without dynamic segments will always execute the model hook.

explained here.

So as discussed in this issue, use the setupController hook, to fetch your model, in these cases.

Working bin of your code, with setupController

Answer 2

Sorry I'm late and this might not be of any use for you. I just wanted to post it over here, if in case it might be of any use for others.

This link helped me, clear my problem.

Approach 1: We could supply a model for the route. The model will be serialized into the URL using the serialize hook of the route:

var model = self.store.find( 'campaign', { fb_id: fb_id } );
self.transitionToRoute( 'campaign', model);

This will work fine for routing, but the URL might be tampered. For this case, we need to add extra logic to serialize the object passed into the new route and to correct the URL.

Approach 2: If a literal is passed (such as a number or a string), it will be treated as an identifier instead. In this case, the model hook of the route will be triggered:

self.transitionToRoute( 'campaign', fb_id);

This would invoke the model() and would correctly display the required URL on routing. setupController() will be invoked immediately after the model().

2nd one worked fine for me fine. Hope it's useful and answered the above question.