EmberJS how to handle transitionTo

问题

I have the following code which calls an transitionToRoute('search') when a search-query is entered and the enter button is pressed or submit button is clicked.

However, my Router still won't show the searchQuery in the template where it says:

<p>You searched for: "{{searchQuery}}"</p>

and the URL looks like http://www.example.com/#/search/[object Object] when searching for something (which doesn't seem right to me).

(full code can be viewed over at: http://jsfiddle.net/Mn2yy/1/) This is the relevant code:

Templates:

<script type="text/x-handlebars" data-template-name="container">
    <button {{action "doSearch"}} rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
    {{view Ember.TextField valueBinding="search" action="doSearch"}}

    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="searchpage">
    <h1>Search</h1>
    {{#linkTo "home"}}Homepage{{/linkTo}}
    <p>You searched for: "{{searchQuery}}"</p>
</script>

Application controller:

MyApp.ApplicationController = Ember.Controller.extend({
    // the initial value of the `search` property
    search: '',

    doSearch: function() {
        // the current value of the text field
        var query = this.get('search');
        this.transitionToRoute('search');
    }
});

and the Searchpage route:

MyApp.SearchRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('searchQuery', this.get('query'));
    },

    renderTemplate: function() {
        this.render('searchpage', { into: 'container' });
    }
});

回答1:

First, you need to define the dynamic segment in the router for the search route:

MyApp.Router.map(function() {
    this.route("home", { path: "/" });
    this.route("search", { path: "/search/:query" })
});

Then you set the searchQuery property on the application in the doSearch action. You also pass the query variable to the transitionToRoute method, since it'll fill in the dynamic segment.

MyApp.ApplicationController = Ember.Controller.extend({
    // the initial value of the `search` property
    search: '',

    doSearch: function() {
        // the current value of the text field
        var query = this.get('search');
        this.set('searchQuery', query);
        this.transitionToRoute('search', query);
    }
});

Since you need to access this property from the App.SearchController instance, you need to wire the 2 controllers together by using the needs API:

MyApp.SearchController = Ember.Controller.extend({
    needs: ['application'],
    application: Ember.computed.alias('controllers.application')
});

Aliased the controllers.application property to just application, to avoid too much typing eg. in the template.

Then you bind to this property in the search template:

<script type="text/x-handlebars" data-template-name="searchpage">
    <h1>Search</h1>
    {{#linkTo "home"}}Homepage{{/linkTo}}
    <p>You searched for: "{{application.searchQuery}}"</p>
</script>

Last step: if you refresh the page at this point, searchQuery won't be automatically populated from the URL. Let's just fix that with the deserialize hook:

MyApp.SearchRoute = Ember.Route.extend({  
    deserialize: function(params) {
        this.controllerFor('application').setProperties({
            searchQuery: params.query,
            search: params.query
        });
    },

    renderTemplate: function() {
        this.render('searchpage', { into: 'container' });
    }
});

This will get the params from the URL and set up the application controller with the value of the query key.

That's pretty much it, hope I didn't miss anything!

来源：https://stackoverflow.com/questions/16014743/emberjs-how-to-handle-transitionto