Open Source im professionellen Einsatz
Linux-Magazin 03/2014
923

Beispielanwendung

In Abbildung 5 ist zweimal die Beispielanwendung zu sehen, die im Folgenden mit Meteor entsteht. Das recht schlichte Redaktionssystem Starpublisher zeigt im linken Browser eine Liste von Beiträgen samt Erstellungsdatum, Autor, Titel und Text. Die Beiträge sind absteigend nach dem Datum sortiert, sodass der neueste am oberen Ende steht. Ein Klick auf einen Beitrag öffnet ihn im Editor, wie ihn der rechte Browser darstellt. Dort aktualisiert die Schaltfläche »Speichern« den Beitrag, »Löschen« entfernt ihn. Der Menüpunkt »Hinzufügen« legt einen neuen Beitrag im Editor an.

Nur ein angemeldeter Benutzer kann einen Beitrag verfassen, und er allein kann ihn später überarbeiten oder löschen. Die Anmeldung erfolgt über den Menüpunkt »Sign In« , in Abbildung 6 rechts oben zu sehen. Zunächst erzeugt der Entwickler die Kernfunktionen zum Auflisten, Speichern und Löschen der Artikel. Das Menü und die Zugriffsverwaltung reicht er anschließend nach.

Abbildung 6: Über das Hauptmenü kann sich der Besucher anmelden sowie Beiträge auflisten, bearbeiten oder einen neuen Eintrag anlegen.

Listing 5 initialisiert den Zugriff auf die Datensammlung »Articles« . Dieser Javascript-Code findet in der Datei »model.js« im Wurzelverzeichnis des Projekts Platz, von wo ihn Webserver und Browser laden und ausführen. Das Template aus Listing 6 übernimmt die Darstellung der Beiträge aus der Datensammlung »Articles« im Browser. Es ist in der Template-Sprache Handlebars [7] abgefasst und in der Datei »template.html« im Verzeichnis »client« gespeichert. Zeile 2 ruft das Template »articles« (Zeilen 6 bis 15) auf, die Zeile 3 das »editor« -Template aus den Zeilen 17 bis 27. Vor der Darstellung im Browser ersetzt Handlebars die Template-Aufrufe mit deren Rückgabewerten.

Listing 6

client/template.html

01 <body>
02   {{> articles}}
03   {{> editor}}
04 </body>
05
06 <template name="articles">
07  <div id="articles">
08   {{#each articles}}
09   <article>
10     {{formatDate date}}
11     <h2>{{title}}</h2>
12     <p>{{text}}</p>
13   </article>
14   {{/each}}
15 </template>
16
17 <template name="editor">
18  <div id="editor">
19   <input type="hidden" id="id" value=""/>
20   <h2>Title</h2>
21   <input type="text" id="title" value="">
22   <h2>Text</h2>
23   <textarea id="text"></textarea>
24   <button id="save">Speichern</button>
25   <button id="remove">Löschen</button>
26  </div>
27 </template>

Listing 5

Zugriff auf Anwendungsdaten

01 Articles = new Meteor.Collection("articles");

Template mit Schleife

Das Template »Articles« iteriert (Zeilen 8 bis 14) mittels »#each« über alle Beiträge, die in der Template-Variablen »articles« gespeichert sind. Pro Schleifendurchlauf gibt es einen Beitrag mit Datum, Titel und Text aus. Der Editor aus dem gleichnamigen Template speichert im Input-Element in Zeile 19 die aktuelle Beitragskennung, im Input-Element in Zeile 21 den Titel und im Textarea-Element in Zeile 23 den Lauftext. Die Knöpfe in den beiden folgenden Zeilen speichern oder löschen den Beitrag.

Der Javascript-Code aus Listing 7 versorgt das Template aus Listing 6 mit Daten und versieht es mit Interaktivität. Die Zeilen 1 bis 3 binden die Template-Variable »articles« aus Listing 6 an eine Funktion, in der die Methode »find()« in Zeile 2 alle Objekte der Datensammlung »Articles« ausliest. Das Objekt im zweiten Parameter des Aufrufs sortiert die Objekte über das Feld »date« absteigend.

Listing 7

client/client.js

01 Template.articles.articles = function() {
02  return Articles.find({}, {sort: {date: -1}});
03 }
04
05 Template.articles.helpers({
06  formatDate: function(date) {
07   return moment(date).format("lll");
08  }
09 });
10
11 Template.articles.events({
12  'click': function() {
13   var doc = Articles.findOne({_id: this._id});
14   load(doc._id, doc.title, doc.text);
15  }
16 });
17
18 Template.editor.events({
19  'click #save': function() {
20   var now = new Date();
21   Articles.upsert(val('id'), {title:val('title'), text:val('text'), date:now});
22   load();
23  },
24  'click #remove': function() {
25   Articles.remove(val('id'));
26   load();
27  }
28 });

Der Zugriff auf die Template-Variable »articles« aus Listing 6 geschieht intern über den von »find()« zurückgegeben Datenbankcursor. Ändert sich die Datensammlung, dann veranlasst der Cursor die Neuberechnung des Templates aus Listing 6, Zeilen 6 bis 15.

Die Zeilen 5 bis 9 erzeugen in Listing 7 die Hilfsfunktion »formatDate« , die Zeile 10 in Listing 6 aufruft. Sie formatiert ein Datumsobjekt mit Hilfe der in Listing 4 installierten Javascript-Bibliothek Moment als lesbare Zeichenkette. Der Aufruf der Methode »events()« in den Zeilen 11 bis 16 und 18 bis 28 von Listing 7 definiert die Ereignisbehandlung für ausgewählte HTML-Elemente durch Rückruffunktionen. Der Code übergibt den Aufrufen jeweils ein Objekt aus Schlüssel-Wert-Paaren.

Der Schlüssel »click« weist in Zeile 12 dem Klick auf einen Beitrag die Rückruffunktion aus den Zeilen 12 bis 15 zu. In Zeile 14 lädt die Funktion »load()« den Beitrag in den Editor, den zuvor Zeile 13 mittels »findOne()« anhand seiner ID ausgewählt und in der Variablen »doc« gespeichert hat.

Der Schlüssel »click #save« veranlasst in Zeile 19 beim Klick auf den Speichern-Knopf aus Listing 6 den Aufruf der Methode »upsert()« in der Rückruffunktion aus den Zeilen 19 bis 23. »upsert« aktualisiert bestehende Beiträge und legt sie ansonsten neu an.

Die Methode Upsert übernimmt die Beitragskennung und den Beitrag in Form eines Javascript-Objekts. Die benötigten Werte liest der Code mit der Funktion »val« aus. Beim Löschen entfernt die Rückruffunktion den Datensatz mit der Methode »remove()« (Zeilen 24 bis 27).

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

comments powered by Disqus

Ausgabe 08/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.