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鍵的值。

這就是它，希望我沒有錯過任何東西！