Question

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

我希望我的控制器能够切换editing属性，并在保存或回滚模型时将其设置为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();
    },
  }
});

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

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

Answer 1

这是可能的，但有点奇怪。 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。

如何在Ember Mixins中起作用？

1 个答案: