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

Question

在 EmberJS 应用程序中是否有一种可接受的方法来保存路由之间的状态？例如，我有一个作为 ArrayController 实现的 Infinite Scroller，当用户滚动时，它会从服务器检索内容页面。当用户点击这些结果之一时，我想转换到专用的“详细信息”路线。

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

Answer 1

如果加载 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}));
}

健康管理系统

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