在ember.js中实现“条件”后退按钮

时间:2013-11-26 21:36:50

标签: javascript mobile ember.js routes back

我正在开发基于ember.js(版本1.2)的移动应用程序,我正在尝试找到实现全局菜单切换/返回按钮模式的最惯用的方式,这在许多移动应用程序中很常见。具体来说,它是一个位于固定顶部工具栏左侧的按钮,当用户处于应用程序的主页/索引视图时,该按钮切换隐藏的抽屉主菜单,但是当移动到子路径时,按钮显示后退箭头,单击时,它将用户返回到先前查看的路径(如果没有先前的历史状态,则返回索引路径,即,如果用户在加载应用程序时直接进入子路径)

Fyi,目前我的应用程序是根据应用程序模板中的固定顶部工具栏和菜单切换/后退按钮构建的。理想情况下,无论路由如何转换到此类功能,无论是通过transitionTo()还是{{#link-to}}帮助,等等。

基本上我想知道Ember是否在内部维护任何类型的可访问历史记录/日志,记录在应用程序生命周期内转换到的路径,以及有条件地更改路径的最佳方式切换/后退按钮执行的操作及其显示(也称为其图标),具体取决于当前路径。和/或有没有办法听取余烬的路线变化事件,所以如果需要我可以自己实现这段历史?

1 个答案:

答案 0 :(得分:11)

我不想成为坏消息的承载者,但我也讨厌让你不知所措。

Ember没有跟踪历史记录,没有一般用例(特别是因为浏览器会为你跟踪它)。

幸运的是,您可以监控应用程序控制器中的路由更改,这样的事情应该让您入门(注意我没有花时间制定一个完美的解决方案,只是向您展示了它所需的基础知识,我'让你弄清楚适合你的工作流程)

http://emberjs.jsbin.com/IZAZemEP/1/edit

App.ApplicationController = Em.Controller.extend({
  history: [],

  hasHistory: function(){
    return this.get('history.length')>1;
  }.property('history.length'),

  watchHistory: function(){
    this.get('history').pushObject(this.get('currentPath'));
  }.observes('currentPath'),

  actions: {
    goBack: function(){
       // implement your own history popping that actually works ;)
       if(this.get('hasHistory')){
         this.get('history').popObject();
         window.history.back(); 
         this.get('history').popObject(); // get rid of route change here, don't need it
       }
     }
   }
 });