javascript - EmberJS 如何处理 transitionTo

Question

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

但是，我的路由器仍然不会在模板中显示搜索查询:

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

URL 看起来像 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>

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

和搜索页面路由:

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

然后在 doSearch 操作中设置应用程序的 searchQuery 属性。您还将 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 将两个 Controller 连接在一起:

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

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

然后在 search 模板中绑定(bind)到这个属性:

<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 钩子(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 键的值设置应用程序 Controller 。

差不多就这些了，希望我没有遗漏任何东西!