javascript – 如何在Ember Mixins中使用动作？

我正在尝试开发我的第一个mixin,但是我很难让这些动作发挥得很好.

我希望我的控制器能够切换编辑属性,并在保存或回滚模型时将其设置为false.所以我写了一个mixin来添加这个功能.

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

我认为这会很棒,因为我可以在我的模板中使用一致的编辑按钮.

在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}}

…我可以在我的路线中控制保存和取消,如下所示：

在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();
    },
  }
});

但是,我现在很困惑……如果保存失败会怎么样？如何将它连接在一起,以便仅在保存成功完成后将编辑属性设置为false？

有没有办法从路线上的行动中获取承诺？我是否朝着正确的方向前进？

解决方法:

这是可能的,但有点奇怪. Here is a 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.

标签：javascript,ember-js,promise,ember-cli
来源： https://codeday.me/bug/20190623/1274029.html