EmberJS如何处理transitionTo

Question

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

然而，我的网络仍然不会显示在模板中SEARCHQUERY那里说：

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

应用控制器：

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> 

最后一步：如果您刷新页面，在这一点上，searchQuery不会自动从URL填充。让我们只是修复与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获得PARAMS和设置应用程序控制器与query键的值。

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