2017-11-05 2 views
0

Innerhalb einer Ember controller Ich habe eine Anzahl von actions, die Daten Ereignisse (Update erstellen und löschen) auf den Laden.Ember zentrale Fehlerbehandlung innerhalb einer Aktion

Jede dieser Anforderungen hat die gleiche Fehlerbehandlungslogik, die viele Male wiederholt wird. Gibt es eine Möglichkeit, diese Fehlerlogik zu zentralisieren?

  1. Angesichts dieser Logik wird von vielen Routen verwendet werden, was wäre der beste Ort in Ember für das Leben?
  2. Wie kann der Kontext beibehalten werden, sodass this noch verfügbar ist, um Toast-Nachrichten an das DOM zu senden? Hier

ist ein Beispiel dafür, was ich habe jetzt

createEntryRecord() { 
    // This action is a 'create' button on a modal 
    set(this, 'isLoadingModal', true); // shows loading spinner 
    let dbid = this.get('dbidModal'); 
    let type = this.get('entryModalType'); 

    this.get('store').createRecord('my-store', { 
    type, 
    dbid 
    }) 
    .save() 
    .then((record) => { 
    get(this, 'flashMessages').success(`Created`); // Toast message 
    }) 
    .catch((e) => { 
    // Begin of the error handling logic 
    let errors = get(e, 'errors'); 
    if (errors.length) { 
     errors.forEach(err => { 
     let field = err.source.pointer.split("/").pop(); 
     get(this, 'flashMessages').danger(`${field}: ${err.detail}`); 
     }); 
    } else { 
     let message = get(e, 'message'); 
     get(this, 'flashMessages').danger(`${message}`); 
    } 
    }) 
    .finally(() => { 
    set(this, 'isLoadingModal', false); // stop the loading spinner 
    set(this, 'isEntryModalShown', false); 
    }); 
}, 
+2

Wie wäre es mit einem Fehler-Service, den Sie injizieren können, wo immer Sie wollen und nach Bedarf wiederverwenden? – alptugd

+0

@altptugd Das klingt nach einem guten Ansatz. Möchtest du es als Antwort posten? – oden

Antwort

1

Ich würde eine Lösung vorzuschlagen, die Embers Object Model Mixins nutzt.
Zuerst erstellen Sie eine gemeinsame Mixin für alle Modelle:

// app/mixins/flashing-model.js 
import Mixin from '@ember/object/mixin'; 
import { inject as service } from '@ember/service'; 

export default Mixin.create({ 
    flashMessages: service(), // can be accessed via this.get('flashMessages') 
    save(...args) { 
     const superSavePromise = this._super(...args); 
     superSavePromise.then(() => { 
      // your positive logic 
     }).catch(e => { 
      // your negative logic 
     }); 
     return superSavePromise; 
    } 
}); 

Dann Sie es in jedem der Modelle umfassen. Zum Beispiel:

// app/models/some-model.js 
import FlashingModel from '{your-app-name}/mixins/flashing-model'; 
import DS from 'ember-data' 
export default DS.Model.extend(FlashingModel, { 
    // ... 
}); 

Danach können Sie Ihren Controller bearbeiten:

this.get('store').createRecord('my-store', { 
    type, 
    dbid 
}) 
.save() 
.finally(() => { 
    // ... 
}); 

So in Bezug auf Ihre Fragen:
1. Ember Mixins (unter app/mixins Verzeichnis) kann ein guter Ort, um gemeinsame Logik Gastgeber .
2. Bei der Implementierung der obigen Lösung müssen Sie nicht unbedingt den this Kontext des Controllers beibehalten, da das flashMessages service in jedes Modell injiziert wird. Daher können Sie auf den Service innerhalb des save-Kontext zugreifen, der das this des Modells ist.

+0

Das ist großartig !! Habe gerade den Funktionsnamen von 'save' geändert. Wenn ich also diese Logik umgehen muss, funktioniert das Speichern immer noch wie erwartet. – oden

Verwandte Themen