Question

我有一个Ember列表和一个编辑表单。每次列表中选定的项目发生更改时，编辑表单都会丢弃所有更改并加载新模型。

我的问题是没有办法放弃更改，因为停用事件不会触发。

例如，从url/favs/123/edit转到url/favs/456/edit取消激活（并退出）事件不会触发。因此无法正确地丢弃任何更改。

以下是我所指的代码部分：

App.Router.map(function() {
    this.resource('favs', { path: '/favs' }, function() {
        this.route('new');
        this.route('edit', { path: ':fav_id/edit' })
    });
});

[...]

App.FavsEditRoute = Ember.Route.extend({
    deactivate: function() {
        var model = this.get('currentModel');
        if(model && model.get('isDirty')) {
            model.get('transaction').rollback();
        }
    },

    model: function(params) {
        return App.Fav.find(params.fav_id);
    },
});

Answer 1

我建议使用willTransition路由操作。它目前似乎被宣传为Ember指南中的解决方案：

https://guides.emberjs.com/release/routing/preventing-and-retrying-transitions/

除了处于公共API之外，这种方法的优势在于，您可以提示用户确认他们是否确实要放弃更改，如果他们拒绝，则会使转换无效。

例如：

App.FavsEditRoute = Ember.Route.extend({
  ...
  actions: {
    willTransition: function(transition) {
      controller = this.controllerFor('fav');
      if (controller.get('isDirty') &&
          !confirm("Are you sure you want to abandon progress?")) {
        transition.abort();
        return false;
      } else {
        controller.get("content").rollback();
        return true;
      }
    }
  }
});

Answer 2

当路线完全离开时，只执行停用挂钩。因此我建议覆盖Route的contextDidChange函数。以下摘录自Ember Source：

Ember.Route = Ember.Object.extend({
    /**
    @private

    Called when the context is changed by router.js.
  */
  contextDidChange: function() {
    this.currentModel = this.context;
  }
});

我建议这样做：

App.FavsEditRoute = Ember.Route.extend({
    deactivate: function() {
        this.doRollback();
    },
    contextDidChange: function() {
        this.doRollback();
        this._super();
    },
    doRollback: function(){
        var model = this.get('currentModel');
        if(model && model.get('isDirty')) {
            model.get('transaction').rollback();
        }
    }
});

Answer 3

在Ember 2.2中，正确的代码（在路线中）是：

actions: {
  saveScene: function (scene) {
    var _that = this;

    scene.save().then(function (response) {
      // on saveScene action, go to list route
      _that.transitionTo('scenes');
    });
  },

  willTransition: function (transition) {
    // on transition, if model has unsaved changes, revert them
    var model = this.controller.get('model');
    if (model && model.get('hasDirtyAttributes')) {
      model.rollbackAttributes();
    }
  }
}

Ember事件可在同一路线之间进行最佳丢弃更改

3 个答案: