实施“有条件”在ember.js中返回按钮 [英] Implementing a "conditional" back button in ember.js

问题描述

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

Fyi，目前我的应用程序结构与根应用程序模板中的固定顶部工具栏和菜单切换/返回按钮。理想情况下，无论路由如何转换，无论是通过 transitionTo（）还是 {{link-to}} helpers等等。

所以本质上我想知道Ember内部是否保持任何可访问的历史/日志，哪些路由被过渡到应用程序的生命周期以及有条件地更改切换/返回按钮执行的操作及其显示（也称为其图标）的最佳方法取决于当前路由。和/或有没有办法听Ember的路线变化事件，所以如果需要，我可以自己实现这个历史。

解决方案

我讨厌成为坏消息的持者，但我也不讨厌离开你。

Ember没有跟踪历史，没有一般的幸运的是，您可以监视应用程序控制器中的路由更改，这样就可以让您开始使用该工具（特别是因为浏览器为您保持跟踪）

（注意，我没有花时间制定一个非常好的解决方案，只是显示出您需要的基础知识，我会让您找出适合您的工作流程）

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

  App.ApplicationController = Em.Controller.extend（{
 history：[]，
 
 hasHistory：function（）{
 return this.ge吨（ history.length）→1; 
} .property（'history.length'），
 
 watchHistory：function（）{
 this.get（'history'）。pushObject（this.get（'currentPath ））; 
} .observes（'currentPath'），
 
 actions：{
 goBack：function（）{
 //实现你自己的历史弹出实际工作; 
 if（this.get（'hasHistory'））{
 this.get（'history'）。popObject（）; 
 window.history.back（）; 
 this.get（'history'）。popObject（）; //在这里摆脱路线变化，不需要
} 
} 
} 
}）; 
  

I am working on an ember.js (version 1.2) based mobile application and I am trying to find the most idiomatic way of implementing the global menu toggle/back button pattern that is common in many mobile apps. Specifically, its a button that sits on the left side of a fixed-top toolbar, which toggles a hidden drawer main menu when the user is at the app's home/index view, however upon moving into a sub route, the button displays a back arrow, and when clicked, it takes the user back to the previously viewed route (or back to the index route if there is no previous history states, i.e. if the user came into a sub route directly upon loading the app).

Fyi, currently I have my app structured with the fixed-top toolbar and menu toggle/back button in the root application template. Ideally this functionality would work no matter how a routes are being transitioned to, whether via transitionTo(), or {{#link-to}} helpers, ect.

So essentially I want to know if Ember internally maintains any sort of accessible history/log of what routes were transitioned to over the course of the app's lifetime, and also what would be the best way to conditionally change the action that the toggle/back button performs and its display (aka its icon) depending on the current route. And/or is there a way to listen to ember's route change events so I could implement that history myself if need be?

解决方案

I hate to be the bearer of bad news, but I also hate to leave you hanging.

Ember doesn't keep track of the history, there isn't a general use case for it (especially since the browser keeps track of it for you).

Fortunately you can monitor route changes in the application controller, something like this should get you started (Note I didn't spend time working out an awesome solution that works perfectly, just showed you the basics you need for it, I'll let you figure out the workflow that works well for you)

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
       }
     }
   }
 });

这篇关于实施“有条件”在ember.js中返回按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！