In unsere Blog habe ich bereits zwei Artikel zum Thema Meteor veröffentlicht
Dieser Artikel geht auf User Accounts und Templates (Verarbeitung von Formulardaten, Context, Helpers) ein.

User Accounts

Um schnell und einfach eine Benutzeranmeldung zu ermöglichen kann man folgende Packages hinzufügen:

meteor add accouts-password accounts-ui

Jetzt kann man in einem Template mit `{{> loginButtons}}` die Oberfläche für die Benutzeranmeldung hinzufügen. Welche Inhalte ein Benutzer sehen darf, bestimmt man am Besten vor den Router-Actions:

    /** About route */
    this.route('about’, {
        path: '/about,
        onBeforeAction: function() {
            if (Meteor.userId()) { // Wenn eingeloggter Benutzer
                this.render('header', { to: 'header' });
                this.render('about');
            } else { // Wenn nicht eingeloggt
                Router.go(‚index’); // oder „this.next() um bei der „action:“ weiter zu machen
            }
        }
    });

Wie schon bekannt, ist der Code im Lib-Ordner („lib“) am Client und Server verfügbar. Das heißt, jemand könnte die Datei ändern und Zugriff zu der Route haben, obwohl er nicht eingeloggt ist. Das ist richtig, deshalb ist es umso wichtiger, dass man dem Client nicht vertraut und Server Methoden verwendet um die Daten zu prüfen und nur autorisierten Benutzern entsprechende Daten liefert.

Mehr dazu:

• Meteor Accounts
• Restrict Routes auf Stack Overflow

Formulardaten und Template Context

Im ersten Artikel habe ich erklärt, dass jQuery bereits mitgeliefert wird und man deshalb auch einfach auf Formulardaten zugreifen kann. In Meteor gibt es aber einen eleganteren Weg, nämlich den Template Context zu verwenden.

Man übergibt das Template der Funktion und kann mit „.find()“ oder „.findAll()“ die gewünschten Daten holen.

/**
 * Form event listener
 */
Template.TemplateName.events({
    /**
     * Submit form
     *
     * @param  object e Event
     * @param  object t Template
     * @return bool   False, for preventing default action
     */
    '#form submit: function(e, t) {
        console.debug(t.find(‚#value’).value;
        
        t.find('#form').reset(); 

        return false;
    }
});

Durch die Verwendung vom Template kann man, wenn man eine verschachtelte Datenstruktur hat, auch auf die Elternelemente zugreifen. Mit „t.data“ stehen alle Daten zur Verfügung.

Im Template selbst kann man beim Rendern auch Ebenen nach oben gehen.
Hat man zum Beispiel ein Objekt von Benutzern („users“) und diese Benutzer haben mehrere Autos („cars“) mit Nummerntafeln und man möchte aber auch neben jeder Nummerntafel nochmal den Namen stehen haben, kann man in den Schleifen nach oben gehen.

{{#each users}}
    {{firstname}} {{lastname}}

    {{#each cars}}
        {{num}} belongs to {{../lastname}}
    {{/each}}
{{/each}}

Mehr dazu:

• Blaze TemplateInstance findAll
• Accessing Parent data in Meteor

Formulardaten und Reaktivität

Meteor setzt stark auf Realtime. Das heißt, dass sich alle Variablen in den Templates selbst automatisch aktualisieren, wenn es nötig ist bzw. wenn sich die Daten ändern.

Das funktioniert ohne weiteres zutun, wenn man Daten in die Datenbank speichert. Will man aber jetzt nur den Status am User-Interface ändern ohne die Werte schon zu speichern, weil zum Beispiel noch andere Angaben gemacht werden und die Eingabe evtl. auch noch abgebrochen werden kann.
Dazu verwendet man Sessions.

Ein Beispiel für einen Range Slider:

<!— Template „testSlider“ —>

<lable for=„slider“>Slider:</lable>
<input type="range" id=„slider“ name=„slider“ min="0" max="50" step="1" value="0" />
<output for=„slider“>{{slider}}</output>
```

```JavaScript
Template.testSlider.helpers({
    slider: function() {
        if (!Session.get(‚slider‘))
            Session.set(‚slider‘, 0);

        return Session.get(‚slider‘);
    },
});

Template.testSlider.events({
    'input #slider‘: function(e) {
        Session.set(‚slider‘, e.target.value);

        return false;
    }
});

Jetzt wird beim ändern des Sliders der aktuelle Wert in eine Session gespeichert und bei Bedarf ausgelesen.

Mehr dazu:

• Meteor Sessions

Template Helpers

Mit Template Helpers kann man zum Beispiel Ausgaben formatieren oder andere Daten anhand der ausgegebenen Daten nachladen.

Man kann für jedes Template eigene Helper definieren

Template.TemplateName.helpers({
    helper: function(context) {
        // do something…
    }
});

oder für alle Templates

Template.registerHelper(‚helper‘, function(context) {
// do something…
});

Verwendet wird das dann so im Template:

{{helper ouputVar}}

Der übergebene Context kann auch weggelassen werden, wird er verwendet, wird dementsprechend der Wert von „ouputVar“ der Helper-Funktion übergeben.

Mehr dazu:

• Meteor Template Helpers
• A look at a Meteor Template (Discover Meteor)

Up Next

Die nächsten Schritte wären, zu schauen, ob und wie die Sicherheit weiter verbessert werden kann und wie man das vorhandene Login-System verbessert (Benutzerprofile, etc.) bzw. ein Eigenes bauen kann. Ein weitere Schritt wäre, sich mit MongoDB weiter auseinander zu setzten, um bei größeren Projekten eine vernünftige Datenbank-Struktur aufbauen zu können.