路由时Ember恢复状态 [英] Ember Restore State when Routing

问题描述

我有一个应用程序控制器，其输入绑定到searchTerms，单击时，我将路由到搜索结果路由。代码来自一本书

I have a application controller with a input bound to searchTerms and on click I am routing to search-results route. The code is from a book

Rocknrollcall.Router.map(function() {
    // Add your routes here
    this.route('search-results', {
        path: 'search/:term'
    });

  });

}）;

Rocknrollcall.ApplicationController = Em.ObjectController.extend（{
searchTerms：''，
操作：{
Submit：function（）{
this.transitionToRoute（'search-results'，this。 get（'searchTerms'））;
}
}
}）;

Rocknrollcall.ApplicationController = Em.ObjectController.extend({ searchTerms: '', actions: { submit: function() { this.transitionToRoute('search-results',this.get('searchTerms')); } } });

在返回的数据中，我是在搜索结果中呈现

In the route I am returning some data I am rendering in search results

Rocknrollcall.SearchResultsRoute = Ember.Route.extend({
  model: function (query) {
     // ajax call
     return {artists: artists, songs: songs}
   });

}

}）;

一切正常。如果我从索引输入，然后说tom，则转到包含所有数据的URL
http：// localhost：9000 /＃/ search / tom
。

Everything works fine. If I go from index and enter say tom I go to this URL "http://localhost:9000/#/search/tom" with all data.

但是关键是当我直接将URL放在浏览器中时，我确实获得了数据。但是应用程序模板中的搜索词输入框为空。我也想以某种方式填充它。我的问题是在Ember中正确执行此操作的最佳解决方案是什么？

However the point is when I put the URL directly in browser I do get the data. But the search term input box in the application template is empty. I would like to populate that also somehow. My question is what is the best solution to do so in Ember properly?

让我们尝试详细说明一下。搜索字词输入位于应用程序模板中

Let's try to elaborate a bit. The search term input is in application template

                <script type="text/x-handlebars" data-template-name="application">
                      {{input action="submit" type="text" class="search-input" placeholder="Search for artists or song names" valueBinding="controller.searchTerms"}}               
                       <button {{action "submit"}} class="btn btn-primary"></button>
                      {{outlet}}
                </script>

现在，如果用户使用搜索字词将网址加为书签，然后正确显示出口，通过路线模型。但是，绑定到应用程序控制器中变量的搜索词输入为空，因为我没有还原它。我想知道在直接转到 http：// localhost：9000 /＃/ search / tom时如何使用URL中的搜索词恢复应用模板中的输入？还是将输入移动到子模板（在这种情况下是在插座中渲染的美术师）是个好主意吗？

Now if the user kind of bookmarks the URL with the search term and comes back the outlet is properly rendered by going through the route model. However the search term input which is bound to a variable in the application controller is empty because I did not restore it . I would like to know how to restore the input in the application template with the search term in URL when directly going to "http://localhost:9000/#/search/tom"? Or Is it a good idea to move the input to the child template in this case artists that is rendered in the outlet?

JSBin URL： http ：//jsbin.com/kopovikibi/1/edit？html，js，output

JSBin URL: http://jsbin.com/kopovikibi/1/edit?html,js,output

推荐答案

在您的 model 钩子，就在您的返回 JSON数据之前，只需调用

In your model hook, right before your return the JSON data, just call

this.controllerFor("application").set("searchTerms", query.term);

这将修改应用程序中的文本字段模板，因为它绑定到应用程序控制器的 searchTerms 属性。

This will modify the textfield in the application template, because it is bound to the searchTerms property of your application controller.

工作解决方案此处

这篇关于路由时Ember恢复状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！