EmberJs Grundlagen zu Models

Hallo lieber Leser,

in diesem Artikel geht es darum dir das Konzept von Ember Models zu erläutern.
Es ist zu empfehlen den Artikel von vorne bis hinten zu lesen, falls du neu bist.

Wichtig: Da Ember-Cli defakto Standard für EmberJs Entwicklung ist,
werden die Beispiel auf Basis dieses Kommandozeilen-Generator gezeigt.

Was sind Models in Ember?

Models in Ember beschreiben die Daten, sie enthalten diese aber nicht. Stell dir die Models als eine Art Vorlage vor – du sagst Ember welche Datenstrukturen zu erwarten sind und gegebenenfalls in welcher Beziehung (hasMany, belongsTo) das Model (die Daten) zu einem anderen Model stehen. Diese Beziehungen werden aber in einem anderen Artikel erläutert.

Modelle sind essenzieller Bestandteil der Ember Logik, da mit ihnen alles steht und fällt.
Nur wenn die Anwendung weiß was Sie zu erwarten/verarbeiten hat, können die Abhängigkeiten richtig zugeordnet werden.

Beispiel Model Person
Wir erstellen nun ein Model für eine Person.

Das Model wir mit Ember-Cli mit folgenden Befehl in der Kommandozeile erstellt:

ember generate  return serialized;model Person

Daraufhin wird ein leeres Model erstellt, welches wir um Attribute erweitern.

Das fertige Model sieht dann wie folgt aus:

export default DS.Model.extend({  vorname: DS.attr('string'),  nachname: DS.attr('string),  istFrau:DS.attr('boolean', {defaultValue: true}),  alter:DS.attr('number')  geburtstag:DS.attr('date')  });

Standardmäßig können den Attributen die Eigenschaften:
string, boolean, date und number zugewiesen werden.

Jedes Attribut kann noch die Option defaultValue enthalten, dieser wird benutzt,
sollten bei der Übergabe der Daten für dieses Attribut kein Wert vorhanden sein.

Individualisierte Eigenschaften für Model Attribute

Sollten die Standartwerte wie oben beschrieben nicht ausreichen, kann mit Transforms eingehende und ausgehende Daten nach deinen Wünschen manipulieren werden.

DS.Transform erstellen mit Ember-Cli

ember generate transform gehalt  export default DS.Transform.extend({    deserialize(serialized) {     return serialized;   },    serialize(deserialized) {  	return deserialized;  } });

Zwei Methoden anwenden:

deserialize

Wird aufgerufen, wenn Daten von außerhalb übergeben werden. Die veränderten Werte werden dann auch auf der Client Site angezeigt.

serialize

Werden die Daten zum Beispiel Zwecks Update wieder an den Server geschickt, wird vor dem Übermitteln diese Funktion aufgerufen.
Diese Funktion wandelt die davor veränderten Daten wieder um.

Beispiel Anwendungsfall

Wir möchten jetzt für unsere Person Model eine neues Attribut Gehalt erstellen, das Gehalt soll auf der Client Seite mit einem € (Euro) Zeichen versehen werden.

Da die Zahlenwerte vom Server unformatiert übergeben werden, manipulieren wir die Daten mittels Transforms.

Das fertige Transform sieht wie folgt aus:

export default DS.Transform.extend({
  deserialize(serialized) 
   return serialized.concat(" €");
 },
serialize(deserialized) {
   return deserialized.replace("/ €/g", "");
 }
 });

Erklärung

Deserializer-Funktion

In der Deserializer-Funktion wird dem Zahlenwert ein €-Zeichen angehängt. Wegen der „lockeren“ JavaScript Typisierung ist es also möglich einen Attribut mit der Eigenschaft Number (serialized) und ein Attribut mit der Eigenschaft string (.concat(“ €“)) zu Verknüpfen. JavaScript wandelt dann diese zusammengesetzten Werte in einen String um.

Serialized-Funktion

Die Serialized-Funktion nimmt den veränderten Wert (aktuell mit dem €-Zeichen) und entfernt dieses wieder, und gibt dann nur die Zahl zurück.

 

Beziehungen unter Models

Mit Ember (genauer Ember-Data) können Models in Beziehung zueinander gesetzt werden.

Es gibt drei Beziehungstypen: Eins-zu-Eins, Eins-zu-Viele und Viele-zu-Viele.

Als Fallbeispiel nehmen wir wieder das Person Model von oben und fügen ein logisch verknüpftes Model Gehalt hinzu.
Diese beiden Models werden in Beziehung zueinander gesetzt.

Ein Mitarbeiter erhält (in vielen Fällen) nur ein Gehalt von einer Firma, und das Gehalt wird nur jeweils an einen Mitarbeiter ausgezahlt.

Das Person Model

export default DS.Model.extend({  vorname: DS.attr('string'),  nachname: DS.attr('string),  istFrau:DS.attr('boolean', {defaultValue: true}),  alter:DS.attr('number'),  geburtstag:DS.attr('date')
 });

Das Gehalt Model

export default DS.Model.extend({  gehalt: DS.attr('number'),  });

Eins-zu-Eins Beziehung

Um diese Art von Beziehungen abzubilden bieten Ember-data die Methode DS.belongsTo an.

DS.belongsTo verlangt ein String, welcher dem Namen des Model entspricht, in unserem Fall also Person.

Wir sagen also „Ein Gehalt“ gehört nur „Einer Person“.

//Gehalt Model
export default DS.Model.extend({  gehalt: DS.attr('number'),
 person: DS.belongsTo('person')  });

„Eine Person“ kann nur „ein Gehalt“ haben.

//Person Model
export default DS.Model.extend({   vorname: DS.attr('string'),
  nachname: DS.attr('string),
 gehalt:DS.belongsTo('gehalt'), .... // Hier steht dann der Rest der Attribute von oben... ;)  });

Eins-zu-Viele Beziehung

Um diese Art von Beziehungen abzubilden bieten Ember-data die Methode DS.belongsTo  im Kombination mit DS.hasMany an.

Das logische Prinzip des Person Model ändern wir zum besseren Verständnis in Mitarbeiter, fiktiv haben wir ein Gehalt Model was mehrere Mitarbeiter besitzen können.

In einer Firma bekommt jeder Mitarbeiter (außer die armen Praktikanten ;O) ein Gehalt, also hat das Model Gehalt eine Eins zu Viele Beziehung zum Mitarbeiter Model

DS.belongsTo verlangt ein String, welcher dem Namen des Model entspricht, in unserem Fall also Mitarbeiter (ehemals Person).

//Gehalt Model
export default DS.Model.extend({  gehalt: DS.attr('number'),
 mitarbeiter: DS.hasMany('mitarbeiter')  });

//Mitarbeiter
export default DS.Model.extend({   vorname: DS.attr('string'),
  nachname: DS.attr('string),
 gehalt:DS.belongsTo('gehalt'), .... // Hier steht dann der Rest der Attribute von oben... ;)  });

Viele-zu-Viele Beziehung

Um diese Art von Beziehungen abzubilden muss die Methode DS.hasMany() jeweils im Model stehen.

Zwecks Verständlichkeit werden wir hier die Models nochmal ändern.

Wir haben jetzt ein Model Bewerbung und Firma.

Die logische Verknüpfung soll heißen: Eine Firma kann mehrere Bewerbungen erhalten, Eine Bewerbung kann an mehrere Firmen geschickt werden.

Um das in einer Beziehung abzubilden, müssen beide Models die Methode DS.hasyMany() benutzen.

//Firma Model
export default DS.Model.extend({  name: DS.attr('number'),
 bewerbungen: DS.hasMany('bewerbung')  });

//Bewerbung Model
export default DS.Model.extend({   name: DS.attr('string'),
  firmen:DS.hasMany('firma')  });