How do actions work in Ember Mixins?

Question

I am trying to develop my first mix, but I am having problems so that the actions play well.

I want my controllers to be able to switch a property editingand set it to false when the model is saved or rolled back. So I wrote mixin to add this feature.

in myapp/mixins/editable.js:

import Ember from "ember";

export default Ember.Mixin.create({
  editing: false,

  actions: {
    toggleEditing: function() {
      this.toggleProperty('editing');
    },
    cancel: function () {
      console.log("editable mixin: cancel");
      this.set('editing', false);
      return true;
    },
    save: function () {
      console.log("editable mixin: save");
      this.set('editing', false);
      return true;
    }
  }
});

I thought it would be great, as I may have sequential edit buttons in my templates like this.

in myapp/templates/sometemplate.hbs:

{{#if editing}}
  {{#if model.isDirty}}
    <button class="action-icon" {{action "cancel"}}>{{fa-icon "times" title="discard changes"}}</button>
    <button class="action-icon" {{action "save"}}>{{fa-icon "save" title="save changes"}}</button>
  {{else}}
    <button class="action-icon" {{action "toggleEditing"}}>{{fa-icon "times" title="cancel"}}</button>
  {{/if}}
{{else}}
  <button class="action-icon" {{action "toggleEditing"}}>{{fa-icon "pencil" title="edit"}}</button>
{{/if}}

... and I can control the persistence and undo on my route, something like this:

in myapp/route/someroute.js:

import Ember from "ember";

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('somemodel', params.model_id);
  },
  actions: {
    save: function () {
      console.log("route: save");
      this.modelFor('somemodel').save();
    },
    cancel: function () {
      console.log("route: cancel");
      this.modelFor('somemodel').rollback();
    },
  }
});

However, now I'm confused ... what happens if the failure fails? How can I put it together so that the property is editingset to false only when the save is completed successfully?

? ?

Answer 1

, . JSBin, . , :

const SomeRoute = Ember.Route.extend({
    actions: {
        save() {
            return this.modelFor('somemodel').save();
        }
    }
});

SomeRoute.reopen(EditableMixin);

export default SomeRoute;

Mixin:

export default Mixin.create({
    actions: {
        save() {
            this._super().then(() => {
                this.set('editing', false);
            });
        }
    }
});

, mixin , , mixin.