Emberjs 回去取消

Question

我在各种屏幕（来自用户列表、用户组等）中向用户显示 link。单击 link 时，将显示用户以进行编辑。当在编辑表单中按下取消按钮时，我想转换到上一个屏幕 userlist/group。这在 Emberjs 中通常是如何实现的。

谢谢，穆拉利

Answer 1

可能有一种方法可以干掉（不要重复自己）这件事，但是一种方法是执行 2 个操作：willTransition Ember 已经给了你和 goBack 你自己定义。然后，有一个 "global" lastRoute 变量，您可以按如下方式跟踪：

App.OneRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition){
      this.controllerFor('application').set('lastRoute', 'one');
    },
    goBack: function(){
      var appController = this.controllerFor('application');
      this.transitionTo(appController.get('lastRoute'));
    }
  }
});

您的模板将如下所示：

<script type="text/x-handlebars" id='one'>
  <h2>One</h2>
  <div><a href='#' {{ action 'goBack' }}>Back</a></div>
</script>

工作示例here

Answer 2

你只需要

history.back()

Ember 以及大多数 OPA 框架的主要设计目标之一是与浏览器的历史堆栈协调工作，以便 back "just works".

因此您无需维护自己的迷你历史堆栈、全局变量或转换挂钩。

您可以在您的应用程序路由器中放置一个 back 操作，操作将从任何地方冒泡到该操作，因此您可以在任何模板中简单地说 {{action 'back'}}，无需再费力。

Answer 3

这是我的解决方案，非常简单且性能高。

// file:app/routers/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  transitionHistory: [],
  transitioningToBack: false,

  actions: {
    // Note that an action, like 'back', may be called from any child!  Like back below, for example.

    willTransition: function(transition) {
      if (!this.get('transitioningToBack')) {
        this.get('transitionHistory').push(window.location.pathname);
      }
      this.set('transitioningToBack', false);
    },
    
    back: function() {
      var last = this.get('transitionHistory').pop();
      last = last ? last : '/dash';
      this.set('transitioningToBack', true);
      this.transitionTo(last);
    }
  }
});

Emberjs 回去取消

Emberjs go back on cancel

ember.js