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

2024-03-06

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

仅供参考,目前我的应用程序由根应用程序模板中的固定顶部工具栏和菜单切换/后退按钮构成。理想情况下,无论路由如何转换,无论是通过transitionTo(), or {{#link-to}}帮手等

所以本质上我想知道 Ember 内部是否维护任何类型的可访问历史记录/日志,记录在应用程序的生命周期中转换到的路线,以及有条件地更改切换/后退按钮操作的最佳方法是什么根据当前路线执行及其显示(也称为其图标)。和/或有没有办法监听 ember 的路线更改事件,以便我可以在需要时自己实现该历史记录?


我讨厌传递坏消息,但我也讨厌让你悬着。

Ember 不跟踪历史记录,它没有通用的用例(特别是浏览器会为您跟踪历史记录)。

幸运的是,您可以监视应用程序控制器中的路由更改,这样的事情应该可以帮助您开始(注意,我没有花时间制定一个完美运行的出色解决方案,只是向您展示了它所需的基础知识,我会让您找出最适合您的工作流程)

http://emberjs.jsbin.com/IZAZemEP/1/edit 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
       }
     }
   }
 });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ember.js 中实现“有条件”后退按钮 的相关文章

随机推荐