動作在Ember Mixins中如何工作？

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的路線。