EmberJS如何处理transitionTo [英] EmberJS how to handle transitionTo

问题描述

我有以下代码，当输入搜索查询并按下输入按钮或单击提交按钮时，将调用transitionToRoute('search').

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>

，当搜索某些内容时，URL看起来像http://www.example.com/#/search/[object Object](对我来说似乎不合适).

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

(完整的代码可以在以下位置查看: http://jsfiddle.net/Mn2yy/1/) 这是相关代码:

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

模板:

<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>

应用程序控制器:

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');
    }
});

和搜索页路线:

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

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

推荐答案

首先，您需要在路由器中为搜索路线定义动态网段:

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" })
});

然后在doSearch操作中在应用程序上设置searchQuery属性.您还将query变量传递给transitionToRoute方法，因为它将填充动态段.

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);
    }
});

由于您需要从App.SearchController实例访问此属性，因此需要使用needs API将2个控制器连接在一起:

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')
});

将controllers.application属性仅别名为application，以避免键入过多.在模板中.

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

然后将您绑定到search模板中的此属性:

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>

最后一步:如果此时刷新页面，则searchQuery不会自动从URL中填充.让我们用deserialize钩子解决此问题:

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' });
    }
});

这将从URL中获取参数，并使用query键的值设置应用程序控制器.

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!

这篇关于EmberJS如何处理transitionTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！