Question

当输入搜索查询并按下回车按钮或点击提交按钮时，我有以下代码调用transitionToRoute（'search'）。

但是，我的路由器仍然不会在模板中显示searchQuery：

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

，在搜索某些内容时，网址看起来像http://www.example.com/#/search/[object Object]（对我来说似乎不对）。

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

模板：

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

和Searchpage路线：

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

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

Answer 1

首先，您需要在路由器中为搜索路径定义动态段：

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

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

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个控制器连接在一起：

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

将controllers.application属性别名为application，以避免输入太多内容，例如。在模板中。

然后在search模板中绑定到此属性：

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

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

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键的值设置应用程序控制器。

这就是它，希望我没有错过任何东西！

EmberJS如何处理transitionTo

1 个答案: