Javascript 如何处理转换到_Javascript_Jquery_Ember.js

Javascript 如何处理转换到

javascript jquery ember.js

Javascript 如何处理转换到,javascript,jquery,ember.js,Javascript,Jquery,Ember.js,我有以下代码，它在输入搜索查询并按下enter按钮或单击submit按钮时调用TransitionRoute（“搜索”）但是，我的路由器仍然不会在模板中显示searchQuery，其中显示：您搜索了：“{{searchQuery}}” URL看起来像http://www.example.com/#/search/[object object]在搜索某个东西时（我觉得这不合适）（完整代码可在以下位置查看：）以下是相关代码：模板： <script type="text/x-handl

我有以下代码，它在输入搜索查询并按下enter按钮或单击submit按钮时调用TransitionRoute（“搜索”）

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

您搜索了：“{{searchQuery}}”

URL看起来像

http://www.example.com/#/search/[object object]

在搜索某个东西时（我觉得这不合适）

（完整代码可在以下位置查看：）以下是相关代码：

模板：

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

以及Searchpage路线：

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

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

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

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

然后在

doSearch

操作中设置应用程序的

searchQuery

属性。您还可以将

query

变量传递给

transitionRoute

方法，因为它将填充动态段

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

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

将

controllers.application

属性别名为just

application

，以避免在模板中键入过多内容

然后在

搜索

模板中绑定到此属性：

<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获取参数，并使用

query

键的值设置应用程序控制器

差不多了，希望我没有错过任何东西