javascript - 在EmberJS中保存路线转换之间的状态

有没有一种可以在EmberJS应用程序中保存路由之间状态的方法？例如，我有一个实现为ArrayController的Infinite Scroller，其中包含随着用户滚动从服务器检索的内容页面。当用户单击这些结果之一时，我想转换为专用的“详细信息”路线。

到目前为止一切顺利，但我也希望他们能够在其浏览器上单击“后退”，或在网站上单击后退链接，以回到他们离开时的状态返回上一条路线。在Ember中完成这种事情的最佳方法是什么？

最佳答案

如果在滚动时加载ArrayController的模型(而不是从路由回调函数中的model)，请说出一条名为pages的路由，然后在访问诸如pages/1之类的资源后单击以查看ArrayController应该具有最后一个设置的模型并显示上次查看的结果。

例如，

http://emberjs.jsbin.com/ElADOdeC/1#/pages

js

App = Ember.Application.create();

App.Router.map(function() {
  this.route('pages');
  this.route('page',{path:'/pages/:page_id'});
});

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo('pages');
  }
});

App.PagesController = Ember.ArrayController.extend({
  index:0,
  pages:function(){
    return pagesData.slice(this.get('index'),this.get('index')+2);
  }.property('index'),
  actions:{
    next:function(){
      if(this.get('index')==pagesData.length-1){
        this.set('index',0);
      }else{
        this.set('index',this.get('index')+1);
      }
    }
  }
});

App.PageRoute = Ember.Route.extend({
  model:function(params){
    return pagesData[params.page_id];
  }
});

App.Page = Ember.Object.extend({
  id:null,
  pageContent:"This is the content of this page"
});

var pagesData = [];
for(var i=0;i<10;i++){
  pagesData.pushObject(App.Page.create({id:i}));
}

hbs

<script type="text/x-handlebars" data-template-name="index">
    nothing here
  </script>
  <script type="text/x-handlebars" data-template-name="pages">
    Pages
    <br/>
    {{#each page in pages}}
    {{page.id}}
    <br/>
    {{page.pageContent}}
    <br/>
    {{#link-to 'page' page}}details{{/link-to}}
    <br/>
    <hr>
    <br/>
    {{/each}}
    <button {{action "next"}}>next</button>
  </script>
  <script type="text/x-handlebars" data-template-name="page">
    <b>This is page</b> {{id}} <br/>
    <b>with content:</b></br>
    {{pageContent}}
  </script>