路由时的Ember Restore State

时间:2014-12-31 17:58:21

标签: ember.js ember-router

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

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('搜索结果',this.get(' searchTerms'));         }      }    });

在路线中,我将返回一些我在搜索结果中呈现的数据

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

}

});

一切正常。如果我从索引进入并输入说tom我转到此URL " HTTP://本地主机:9000 /#/搜索/汤姆" 所有数据。

然而关键是当我将URL直接放在浏览器中时,我确实得到了数据。但应用程序模板中的搜索词输入框为空。我想以某种方式填充它。我的问题是在Ember中这样做的最佳解决方案是什么?

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

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

现在,如果用户使用搜索词对URL进行书签并返回,则可以通过路径模型正确呈现出口。但是,绑定到应用程序控制器中的变量的搜索项输入为空,因为我没有将其还原。我想知道如何直接转到&#34; http:// localhost:9000 /#/ search / tom&#34;?如何在URL中使用搜索词恢复应用程序模板中的输入或者将输入移动到子模板是一个好主意,在这种情况下,在插座中呈现的艺术家?

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

1 个答案:

答案 0 :(得分:1)

model挂钩中,就在return JSON数据之前,只需致电

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

这将修改application模板中的文本字段,因为它绑定到searchTerms控制器的application属性。

工作解决方案here