Question

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

到目前为止一切顺利，但我还希望他们能够在浏览器上点击“返回”，或者点击网站上的后退链接，返回到他们离开时的状态。在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}));
}

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

在EmberJS中保存路径转换之间的状态

1 个答案: