smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Todo-App: 2. Das M in MVC

5. November 2012
Stephan
Todo-App mit backbone.js und CoffeeScript entwickeln

Nachdem wir im vorherigen Teil die Vorbereitungen für die Entwicklung unserer Todo-App getroffen haben, können wir nun mit der eigentlichen Umsetzung anfangen.

In diesem Teil beschäftigen wir uns mit der Erstellung eines Models für unsere Todo-App. Ein solches Model soll in unserem Fall eine bestimmte Aufgabe (Todo) repräsentieren und die entsprechenden Daten bereitstellen.

Da die Implementierung des Models nicht kompliziert sein wird, haben wir so einen leichten & überschaubaren ersten Einstieg in backbone.js.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel der Artikel-Serie „Tutorial: Todo-App mit backbone.js & CoffeeScript erstellen“:

  1. Vorbereitungen vornehmen (Projektverzeichnis anlegen etc.)
  2. Model erstellen
  3. Collection – Liste von Models
  4. View-Struktur & Grundlagen einer backbone.js View
  5. Restliche Views implementieren
  6. Controller implementieren & App fertigstellen
  7. Daten mit Ruby on Rails per REST-API serverseitig speichern

Überlegungen zum Aufbau des Models

Vorab sollten wir überlegen, welche Funktionalität (Methoden) und welche Daten (Attribute) das Model beinhalten bzw. bereitstellen soll.

Für unsere Todo-App besteht eine Aufgabe nur aus einem Titel und dem entsprechenden Status der Aufgabe. Das bedeutet also, dass das Model sowohl den Titel als auch den Status als Attribut beinhalten muss. Der Status soll genau zwei Werte, in unserem Fall erledigt und unerledigt/verbleibend, annehmen dürfen. Aus diesem Grund reicht es beim Status zu wissen, ob die Aufgabe erledigt ist oder nicht. Diesbezüglich wäre eine Methode nützlich, die, vereinfacht gesagt, den Status einfach immer von „Ja/Wahr“ auf „Nein/Falsch“ umschaltet.

Das soll es soweit auch mit den Vorüberlegungen gewesen sein.

Model-Klasse erstellen

Zuallererst legen wir eine neue Datei mit dem Namen Todo.coffee im Verzeichnis app/models an. Als nächstes wollen wir das Grundgerüst unser Model-Klasse erstellen und fügen dazu folgenden Code in die neu angelegte Datei:

class TodoApp.Models.Todo extends Backbone.Model

In JavaScript würde der Code so aussehen:

TodoApp.Models.Todo = Backbone.Model.extend({
});

Wir haben jetzt eine Model-Klasse definiert, die von der Klasse Backbone.Model abgeleitet ist. Weil unser Model eine Aufgabe repräsentiert, haben wir das Model entsprechend als Todo bezeichnet. Des Weiteren nutzen wir bei der Deklarierung des Models unseren im ersten Teil angelegten Namespace.

Ein guter Programmierstil ist es, dass der Klassenname und der jeweilige Dateiname übereinstimmen. Bei größeren Projekten ist es zudem von Vorteil Namespaces zu verwenden. Dabei sollte der Namespace optimalerweise 1zu1 die Projektstruktur widerspiegeln.

Im Grunde könnte wir das Model nun auch schon wie folgt instanziieren:

todo = new Todo() # Klammern sind eigentlich nicht notwendig
var todo = new Todo();

Attribute des Models abrufen und setzen

An sich müssen wir im Model die zu beinhaltenden Attribute nicht explizit angeben, da diese dynamisch hinzugefügt werden können. Zum einen können wir unsere Attribute direkt bei der Instanziierung des Model mit übergeben:

todo = new Todo(
    title: 'Aufgabe 1'
    done: true
)

In JavaScript:

var todo = new Todo({
    title: 'Aufgabe 1', 
    done: true
});

Zum anderen stellt die Backbone-Model-Klasse eine get als auch set-Methode zum Abrufen und Setzen von Attributen bereit. Mittels der set-Methode können wir somit auch Attribute setzen:

todo = new Todo()

todo.set(
    title: 'Aufgabe 1'
    done: true
)

In JavaScript:

var todo = new Todo();

todo.set({
    title: 'Aufgabe 1', 
    done: true
});

Der Vollständigkeit halber ist im Folgenden aufgeführt, wie mittels get ein Attributswert abgerufen werden kann:

# würde "Aufgabe 1" in der Konsole ausgeben
console.log(todo.get('title'))

Der Code würde in JavaScript identisch aussehen, so dass ich ihn hier nicht extra aufführe.

Attribute mit Standardwerten vorbelegen

Nun gibt es aber Fälle, wo ein Attrbut schon direkt bei der Instanziierung des Models einen Standardwert haben soll. In unserem Fall möchten wir, dass das Attribut title mit null und das Attribut done (der Status) mit false vorbelegt sind. Hierfür gibt es die Eigenschaft defaults, die genau dafür zuständig ist.

Wir passen unser Todo-Model nun so an, dass die Standardwerte für die Attribute festgelegt werden:

class TodoApp.Models.Todo extends Backbone.Model
    defaults:
        'done': false
        'title': null

Das Ganze in JavaScript programmiert:

TodoApp.Models.Todo = Backbone.Model.extend({
    defaults: {
        'done': false,
        'title': null
    }
});

Methode zum Umschalten des Status

Jetzt wollen wir noch eine Methode implementieren, die den Status umschaltet. Der Status done kann entweder den Wert true oder false annehmen. Bei einer Änderung des Status müssen wir diesen also nur negieren.

Im Folgenden das Todo-Model um die entsprechende Methode ergänzt:

class TodoApp.Models.Todo extends Backbone.Model
    defaults:
        'done': false
        'title': null

    toggleStatus: ->
        @save(done: !@get('done'))

Der selbe Code in JavaScript:

TodoApp.Models.Todo = Backbone.Model.extend({
    defaults: {
        'done': false,
        'title': null
    },

    toggleStatus: function()
    {
        this.save({done: !this.get('done')});
    }
});

Was haben wir hier nun gemacht? Wir haben dem Model die Methode toggleStatus hinzugefügt. Innerhalb dieser Methode speichern wir nun einfach die Änderung des Status, wobei der Status einfach mit ! negiert wird. Durch den Aufruf der save-Methode werden die Änderungen des Models gespeichert.

In diesem Tutorial werden die Änderungen bzw. generell die Model-Daten im Browser per LocalStorage gespeichert. Nähere Informationen dazu im nächsten Teil der Artikel-Serie.

Fazit / Wie gehts weiter?

In diesem Teil haben wir nun ein Model für unsere Todo-App erstellt. Diesbezüglich haben wir einige Grundlagen im Umgang mit backbone.js Models, wie z.B. die Verwendung von Getter und Setter, kennengelernt.

Natürlich gibt es noch weitere Dinge, wie z.B. die Validierung von Model-Attributen. In diesem Tutorial werden ich darauf aber nicht näher eingehen, so dass ich hierfür auf die Dokumentation von backbone.js verweise.

Weiter gehts im nächsten Teil mit der Erstellung von sogenannten Collections.

Wie immer: Bei Fragen und/oder Problemen schreibt mir einfach ein Kommentar.

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!