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

Todo-App: 6. Controller implementieren & App fertigstellen

3. Januar 2013
Stephan
Todo-App mit backbone.js und CoffeeScript entwickeln

Im letzten Teil des Todo-App Tutorials werden werden wir uns der Implementierung des Controllers widmen. Weiterhin müssen wir noch unsere app.coffee-Datei (in welcher wir die Namespaces festgelegt haben) anpassen und unsere App beim Aufruf der entsprechenden Webseite initialisieren.

Der Controller dient in unserem Fall dazu alle benötigten Objekte, wie z.B. die Views, zu instanziieren. Eigentlich gibt es in backbone.js keine Controller-Klasse, sondern nur eine Router-Klasse. Wir werden die bereitgestellte Router-Klasse, aber wie eine normale Controller-Klasse, so wie ihr es vielleicht aus Ruby on Rails, CakePHP etc. kennt, nutzen.

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

TodoController implementieren

Für den Anfang erstellen wir uns zunächst einmal eine Datei namens TodoController.coffee im app/controllers-Verzeichnis. Anschließend erstellen wir uns ein Grundgerüst für unseren Controller:

class TodoApp.Controllers.TodoController extends Backbone.Router
    initialize: ->
        Backbone.history.start()

JavaScript:

TodoApp.Controllers.TodoController = Backbone.Router.extend({
    initialize: function()
    {
        Backbone.history.start();
    }
});

Unsere TodoController-Klasse lassen wir von der von backbone.js bereitgestellten Backbone.Router-Klasse erben.

Der Konstruktor dient uns einzig und allein dazu die Funktion Backbone.history.start aufzurufen. Dieser Funktionsaufruf wird benötigt, um zum einen ausgelöste hashchange-Events zu erkennen (was für unser Tutorial uninteressant ist). Zum anderen dient es zum Routen, indem die angefragte URL aufgelöst wird und geschaut wird, ob dafür eine Methode hinterlegt ist, die aufgerufen werden soll.

Für unsere Todo-App benötigen wir nur eine Route:

class TodoApp.Controllers.TodoController extends Backbone.Router
    # initialize

    routes:
        '': 'index'

JavaScript:

TodoApp.Controllers.TodoController = Backbone.Router.extend({
    // initialize

    routes: {
        '': 'index'
    }
});

Rufen nun also z.B. die Demo-Seite demos.smart-webentwicklung.de/todo-app/ der Todo-App auf, dann wird die index-Methode, die sich im TodoController befinden muss, aufgerufen.

Es wäre natürlich möglich noch weitere Routen hinzufügen. Beispielsweise könnten wir folgende Route hinzufügen:

class TodoApp.Controllers.TodoController extends Backbone.Router
    # initialize

    routes:
        '': 'index'
        'done': 'done'

In diesem Fall würde die done-Methode aufgerufen werden, sobald wir demos.smart-webentwicklung.de/todo-app/#done aufrufen. (Man beachte hierbei den Hash.)

Wir bereits erwähnt, brauchen wir nur die index-Route. Im Folgenden der Code für die entsprechende Methode:

class TodoApp.Controllers.TodoController extends Backbone.Router
    # routes, initialize

    index: ->
        todos = new TodoApp.Collections.TodoCollection()
        todos.fetch()

        todoListView = new TodoApp.Views.TodoListView(todos: todos)
        todoStatsView = new TodoApp.Views.TodoStatsView(todos: todos)
        todoView = new TodoApp.Views.TodoView(
                todos: todos,
                todoListView: todoListView,
                todoStatsView: todoStatsView
        )
        todoView.render()

JavaScript:

TodoApp.Controllers.TodoController = Backbone.Router.extend({
    // routes, initialize

    index: function()
    {
        var todos = new TodoApp.Collections.TodoCollection();
        todos.fetch();

        var todoListView = new TodoApp.Views.TodoListView({todos: todos});
        var todoStatsView = new TodoApp.Views.TodoStatsView({todos: todos});
        var todoView = new TodoApp.Views.TodoView({
            todos: todos,
            todoListView: todoListView,
            todoStatsView: todoStatsView
        });
        todoView.render();
    }
});

Als erstes erzeugen wir uns hier eine neue TodoCollection und holen uns per fetch alle gespeicherten Aufgaben (Todos) aus dem lokalen Speicher des Browsers. Anschließend erstellen wir unsere Views und rendern die TodoView.

App fertigstellen

Damit unsere App beim Aufruf der entsprechenden Webseite auch funktioniert, passen wir als erstes die app.coffee, die sich im app-Verzeichnis befindet, an:

TodoApp =
    Collections: {}
    Controllers: {}
    Models: {}
    Views: {}

    init: ->
        new TodoApp.Controllers.TodoController()

JavaScript:

TodoApp = {
    Collections: {},
    Controllers: {},
    Models: {},
    Views: {},

    init: function()
    {
        new TodoApp.Controllers.TodoController();
    }
}

Wie ihr erkennen könnt, haben wir eine Funktion names init hinzugefügt. Diese dient dazu den TodoController zu instanziieren.

Jetzt müssen wir diese Funktion nur noch aufrufen, sobald unsere Todo-App Webseite aufgerufen wird und das DOM fertig geladen ist. Dazu erstellen wir uns im app-Verzeichnis eine Datei namens main.coffee und fügen folgenden Code ein:

jQuery ->
    TodoApp.init()

JavaScript:

$(document).ready(function()
{
    TodoApp.init();
});

Das wars! Unsere Todo-App ist nun endlich fertig.

Fazit

Die Todo-App könntet ihr jetzt natürlich noch weiter entwickeln und weitere Features hinzufügen. Wie wäre es z.B. wenn ihr anstatt die Daten im lokalen Speicher des Browsers zu speichern, diese serverseitig per REST-API speichert?

Nachdem ihr das Tutorial durchgearbeitet habt, würde mich interessieren: Was haltet ihr von backbone.js? Bevorzugt ihr CoffeeScript oder doch eher JavaScript?

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!