实现“;有条件的“;ember.js中的后退按钮

Implementing a "conditional" back button in ember.js

本文关键字：按钮 ember 有条件 实现 js      更新时间：2023-10-19

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

Fyi，目前我的应用程序在根应用程序模板中有固定的顶部工具栏和菜单切换/返回按钮。理想情况下，无论路由如何转换，无论是通过transitionTo()还是{{#link-to}}助手等，该功能都可以工作。

因此，从本质上讲，我想知道Ember是否在内部维护了任何可访问的历史记录/日志，说明在应用程序的使用寿命中，哪些路线被转换为可访问的路线，以及根据当前路线有条件地更改切换/后退按钮执行的操作及其显示（也称为图标）的最佳方式。和/或有没有办法倾听余烬的路线变化事件，这样我就可以在需要的时候自己实现这段历史？

我不想成为坏消息的传递者，但我也不想让你悬着。

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
       }
     }
   }
 });
相关文章：