Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Erstellen Sie einen Contact Manager mit Backbone.js:  Teil 5

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Getting to Know Backbone.js.
Build a Contacts Manager Using Backbone.js: Part 4

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Willkommen bei der Erstellung eines Inhaltsbetrachters mit der Backbone-Serie.  In den ersten vier Teilen haben wir uns fast alle wichtigen Komponenten angesehen, die mit der neuesten Backbone-Version ausgeliefert werden, einschließlich Modelle, Controller, Ansichten und Router.

In diesem Teil des Tutorials verbinden wir unsere Anwendung mit einem Webserver, damit wir unsere Kontakte in einer Datenbank speichern können. Wir werden LocalStorage nicht betrachten; Dies ist ein beliebtes Mittel, um die Daten zu erhalten, die von Backbone-Apps verwendet werden. Es gibt jedoch bereits eine Reihe hervorragender Tutorials zu diesem Thema.


Wir beginnen

Für diesen Teil des Tutorials benötigen wir einen Webserver und eine Datenbank.  Ich verwende den VWD von Microsoft als Editor, der mit einem integrierten Webserver ausgeliefert wird und gut mit einem MSSQL-Server zusammenarbeitet.  Wir werden dies also verwenden. In Wahrheit spielt es keine Rolle, mit welchem ​​Stack Sie sich entscheiden.

Die Installation und Konfiguration einer dieser Technologien (VWD- und MSSQL-Server) würde den Rahmen dieses Tutorials sprengen, ist aber relativ unkompliziert und es gibt viele gute Leitfäden.

Nach der Installation möchten Sie eine neue Datenbank einrichten, die eine Tabelle enthält, in der die Daten gespeichert werden. Die Tabellenspalten sollten die verschiedenen Eigenschaften widerspiegeln, die unsere Modelle verwenden. Es sollte also eine Namens-, eine Adressenspalte usw. geben.  Die Tabelle können mit den Beispieldaten gefüllt werden, die wir bisher in der gesamten Serie verwendet haben.

Eine Spalte, die in unserer neuen Tabelle erscheinen sollte, die wir jedoch nicht in unseren lokalen Testdaten verwendet haben, ist eine id, die für jede Zeile in der Tabelle eindeutig sein soll. Um die Verwendung zu vereinfachen, möchten Sie wahrscheinlich die automatische Erhöhung aktivieren, wenn die Daten der Tabelle hinzugefügt werden.


Backbone Sync

Um mit dem Server zu kommunizieren, gibt uns Backbone das Sync-Modul. Dies ist das einzige wichtige Modul, das wir noch nicht verwendet haben, und wenn wir es verstehen, wird es unser Wissen über die Grundlagen des Frameworks vervollständigen.

Beim Aufruf der Methode sync() wird eine Anforderung an den Server gestellt. Standardmäßig wird davon ausgegangen, dass entweder jQuery oder Zepto verwendet wird, und die Anforderung wird an den jeweiligen Benutzer delegiert, der tatsächlich ausgeführt wird.  Es wird auch davon ausgegangen, dass eine RESTful-Schnittstelle im Back-End erwartet wird. Daher werden standardmäßig die HTTP-Methoden POST, PUT, GET und DELETE verwendet. Wie wir gesehen haben, kann Backbone so konfiguriert werden, dass es auf GET- und POST-Methoden der alten Schule mit zusätzlichen Kopfzeilen zurückgreift, die die beabsichtigte Aktion angeben.

Neben dem direkten Aufruf von sync() haben Modelle und Sammlungen auch Methoden, mit denen mit dem Server kommuniziert werden kann. Modelle verfügen über die Methoden destroy(), fetch(), parse() und save(), und Sammlungen verfügen über fetch() und parse(). Die Methoden destroy() fetch() und sync() verschieben sich alle auf sync(), unabhängig davon, ob sie mit Modellen oder Sammlungen verwendet werden. Die parse() -Methode, die automatisch aufgerufen wird, wenn Daten vom Server zurückgegeben werden, ist standardmäßig ein einfaches No-Op, das nur die Antwort vom Server zurückgibt. Sie kann jedoch überschrieben werden, wenn die Antwort vor dem Verarbeiten vorverarbeitet werden soll.


Page Load Caveat

Die Art und Weise, wie Modelldaten in die Seite geladen werden, hängt von der verwendeten Back-End-Technologie ab.

Die Backbone-Dokumentation für die fetch() -Methode (einer Sammlung) gibt an, dass diese Methode beim ersten Laden der Seite nicht verwendet werden sollte, um die erforderlichen Modelle vom Server anzufordern. Im FAQ-Abschnitt wird weiter ausgeführt, dass eine Seite die erforderlichen Module bereits für die Seite beim Laden zur Verfügung haben muss, um die anfängliche AJAX-Anforderung zu vermeiden.

Dies ist eine großartige Idee, und obwohl wir den Rat nicht explizit befolgen müssen, wird unsere Anwendung dadurch ein wenig knackiger, und das kann nur eine gute Sache sein.

Die Art und Weise, wie Modelldaten in die Seite geladen werden, hängt von der verwendeten Back-End-Technologie ab. In diesem Beispiel werden wir .net verwenden  Eine Möglichkeit, dies zu tun, besteht darin, ein <script> telement dynamisch zu erstellen, das die erforderlichen Modelldaten enthält, und es in die Seite einzufügen. Dazu müssen wir stattdessen unsere index.html-Datei in index.aspx konvertieren (wir benötigen auch eine index.aspx.cs-Code-Behind- oder Klassendatei). Aber dies wirft ein neues Problem auf.


Verwendung von den Underscore Microtemplates in einer ASPX-Seite

Wir können das Beispiel 'Schnurrbart-Stil' direkt von der Underscore-Dokumentationsseite heben.

Das Problem mit Unterstreichungsvorlagen besteht darin, dass sie <%=verwenden, um Platzhalter in der Vorlage anzugeben, die durch tatsächliche Daten ersetzt werden, wenn die Vorlage verwendet wird.  Dies ist die gleiche Syntax, die ASPX-Seiten verwenden, um dynamischen .Net-Code in HTML-Tags auszuführen.  Die Unterstreichungsvorlagen, die wir in diesem Beispiel verwendet haben, verhindern, dass die ASPX-Seite ordnungsgemäß ausgeführt wird. Stattdessen wird ein Serverfehler angezeigt.

Glücklicherweise gibt es mehrere Möglichkeiten, dieses Problem zu umgehen. Die einfachste Möglichkeit besteht darin, die Syntax zu ändern, mit der die Platzhalter in den Vorlagen angegeben werden.  Unterstriche machen die templateSettings-Eigenschaft genau zu diesem Zweck verfügbar, sodass wir auf einfache Weise einen regulären Ausdruck angeben können, der für die Übereinstimmung der Symbole verwendet wird, die wir verwenden möchten. Wir können das Beispiel "Schnurrbart-Stil" direkt von der Dokumentation "Underscore" abheben. Am Anfang unserer app.js-Datei (innerhalb der äußersten Funktion) können wir einfach den folgenden Code hinzufügen:

Dazu müssen Sie der interpolate-Methode einen neuen regulären Ausdruck zur Verfügung stellen, der es uns erlaubt, die alternative Syntax {{ property }} anstelle von <%= property%> zu verwenden.  Wir sollten an dieser Stelle auch die Vorlagen durchgehen und alle ursprünglichen Vorlagen-Tags ändern, um die neue Syntax zu verwenden.

Obwohl dies in unseren Vorlagen bisher nicht verwendet wurde, gibt es auch weitere Symbole, die Underscore verwenden kann. Wir können JavaScript mit <% auswerten und Daten mit <%- escape. Wenn Sie diese in unseren Vorlagen verwenden möchten und die interpolate-Eigenschaft ersetzt haben, sollten Sie auch die Eigenschaften zum evaluate und für die escape-Unterstreichung konfigurieren.


Bootstrapping the Model Data

Wir können jetzt darüber nachdenken, die Modelldaten, die in einer Datenbank gespeichert sind, auf unserer Seite bereitzustellen, wenn die Seite zum ersten Mal gerendert wird. Wir können dies leicht tun, indem Sie der Klassendatei für unsere ASPX-Seite eine einfache Methode hinzufügen, die die Datensätze aus der Datenbank liest und eine Liste von Objekten erstellt, in denen jedes Objekt einen einzelnen Kontakt darstellt.  Wir können die Liste dann in ein JavaScript-Array serialisieren und in die Seite einfügen. Solange das Array dasselbe Format hat wie das Dummy-Array, das wir in den ersten vier Teilen dieses Lernprogramms verwendet haben, müssen wir unseren Front-End-Code nicht ändern.

Als Platzhalter für das Array können wir dem Hauptteil der Seite direkt vor dem Verweis auf app.js ein neues <script> -Element hinzufügen, das die Methode im Code-behind aufruft: 

Die eigentliche Logik im Code-Behind, die das Lesen und die Serialisierung der Datenbank durchführt, kann je nach Implementierung sehr unterschiedlich sein und liegt etwas außerhalb des Rahmens dieses Tutorials. Wir sind mehr daran interessiert, die anfängliche Nutzlast auf der Seite zu sehen, als wir darüber, wie wir es tatsächlich bekommen. Fühlen Sie sich frei, die Klassendatei im zugehörigen Code herunterzuladen, um den wahrscheinlich schnellsten und einfachsten zu finden, aber keinesfalls den besten Weg, dies zu tun.

An diesem Punkt sollten wir in der Lage sein, das Kontakt-Array, in dem sich unsere Dummy-Daten befanden, aus app.js zu entfernen, die Seite (über den integrierten WVD-Webserver oder IIS) auszuführen und genau dieselbe Seite mit fast derselben Funktionalität zu sehen , wie wir am Ende von Teil 4 gesehen haben. Yay!


Unsere App mit dem Server synchronisieren

In diesem Beispiel habe ich eine .net 4.0-ASMX-Datei verwendet, um die Anforderungen vom Front-End zu bearbeiten.  Damit das Backend die an ihn gesendeten Daten sehen kann, sollten wir die Eigenschaften emulateHTTP und emulateJSON Backbone konfigurieren.   Fügen Sie direkt nach dem Ändern der Vorlagensyntax von Underscore die folgenden Codezeilen hinzu:

Ob Sie diese Eigenschaften beim Erstellen einer Backbone-App wirklich konfigurieren müssen, hängt ganz von der Backend-Technologie ab, mit der Sie arbeiten möchten.

Daher kann unsere Anwendung die Daten auf verschiedene Weise ändern. Es kann die Attribute eines bereits vorhandenen Kontakts ändern, einen vollständig neuen Kontakt hinzufügen oder einen bereits vorhandenen Kontakt löschen.

Die Logik, alle diese Dinge im Frontend zu erledigen, ist bereits vorhanden, aber jetzt, da ein Server beteiligt ist, hat sich das Verhalten der Seite bereits geändert.  Obwohl die Seite wie zuvor gerendert wird, gibt Backbone einen Fehler aus, wenn versucht wird, einen Kontakt zu löschen, und beschwert sich darüber, dass keine URL definiert wurde.  Der Grund dafür ist, dass wir die destroy() -Methode in der deleteContact() -Methode unserer ContactView-Klasse verwendet haben.

Sehen wir uns an, wie Sie die Löschfunktion wiederherstellen können. Als erstes sollten wir ein URL-Attribut für unsere Modelle definieren.  Fügen Sie die Eigenschaft der Contact-Klasse hinzu, die ein einzelnes Modell definiert:

Wir geben eine Funktion als Wert der URL-Eigenschaft an, die die URL zurückgibt, an die die Anforderungen gesendet werden sollen.  In diesem Beispiel können wir eine asmx-Webservice-Datei verwenden, um die Anfragen zu bearbeiten. Wir fügen außerdem den Namen unserer Webmethode (ManageContact) und id des Modells als Abfragezeichenfolgeparameter hinzu.

Wenn wir nun einen der Kontakte löschen, wenn wir die Seite ausführen, wird eine POST-Anforderung an den Webdienst gestellt.  Der Anforderung wird ein X-HTTP-Method-Override-Header hinzugefügt, der angibt, dass die beabsichtigte HTTP-Methode DELETE war. Wir können dies in unserer Webservice-Logik verwenden, um zu bestimmen, welche Aktion in der Datenbank ausgeführt werden soll.

Als Nächstes können wir die saveEdits() - Methode der ContactView-Klasse aktualisieren, sodass der Webdienst benachrichtigt wird, wenn ein Kontakt bearbeitet wird. Ändern Sie die Codezeile, die die set() -Methode verwendet, so, dass sie wie folgt aussieht:

Wir verketten die save() -Methode mit der set() -Methode. Die save() -Methode delegiert an die sync() -Methode, die eine POST-Anforderung an den Server stellt.  Wie zuvor wird die id des Modells als Abfragezeichenfolge gesendet, und die angegebene PUT-Methode wird mit einem X-HTTP-Method-Override angegeben. Diesmal wird jedoch der Content-Type-Header auf application/x-www-form-urlencoded gesetzt (wenn wir die emulateJSON-Eigenschaft nicht konfigurieren würden, wäre dies application / json) und die Modelldaten werden als Formulardaten gesendet Wir können alle notwendigen Änderungen vornehmen.

Am Frontend müssen Sie nur noch die addContact() - Methode der DirectoryView-Klasse aktualisieren. Zuvor hatten wir in dieser Methode eine if-Anweisung, die den Typ des hinzugefügten Modells überprüfte, um zu sehen, ob das Auswahlmenü aktualisiert werden musste.  Wir müssen jetzt die if -Anweisung so ändern, dass sie wie folgt aussieht:

Wir haben die if -Anweisung reduziert, um die else-Bedingung zu entfernen, wodurch der Code ein bisschen aufgeräumter wird.  Wir haben auch die add() -Methode entfernt und stattdessen die create() -Methode hinzugefügt.  Die create() - Methode fügt das neue Modell automatisch der Sammlung hinzu, ohne dass wir manuell eine neue Instanz der Klasse unseres Modells erstellen müssen. Außerdem wird eine Anforderung an den Server gestellt und erneut an sync() delegiert.

Dieses Mal muss der Header X-HTTP-Method-Override nicht festgelegt werden, da POST die Methode ist, die wir verwenden würden, wenn die Anforderung ohnehin an eine RESTful-Schnittstelle gestellt würde. Wie bei der save() -Methode werden die an die create() -Methode übergebenen Modelldaten als Formulardaten an den Server übermittelt.

Wie beim serverseitigen Code, der zu Beginn dieses Teils des Lernprogramms zum Booten der ursprünglichen Modelldaten in unsere App verwendet wurde, liegt der Code, der zur Verarbeitung und Bearbeitung der von Backbone gestellten Anforderungen verwendet wird, außerhalb des Rahmens des Lernprogramms. Wir interessieren uns hier nur für das Frontend. Der für diese Demo verwendete Web-Service ist wie zuvor im Code-Archiv enthalten und vollständig kommentiert.  Schauen Sie also nach, wenn Sie interessiert sind. Ich habe auch ein Datenbank-Backup beigefügt, das Sie wiederherstellen können sollten, um mit den Demo-Daten zu beginnen.


Summary

In diesem Teil des Tutorials haben wir einige der Methoden beschrieben, mit denen wir die sync() - Methode von Backbone delegieren können, um mit einem Back-End zu kommunizieren, das die mit dem Front-End der Anwendung vorgenommenen Änderungen beibehalten kann.

Wir haben gesehen, wie Backbone standardmäßig RESTful-Anfragen an eine angegebene URL stellt und wie wir diese konfigurieren können, um mit älteren Servern zu arbeiten, die nicht nach den REST-Prinzipien arbeiten. Wir haben uns auch einige Methoden angesehen, die an sync() delegiert werden, um mit dem Server zu kommunizieren.  Insbesondere haben wir die Methoden remove(), save() und create() behandelt und uns angesehen, was wie an den Server gesendet wird.

Wir haben auch untersucht, wie einfach es ist, die von Underscore verwendeten Symbole zu ändern, um Daten in eine Vorlage zu interpolieren. Damit ist das Tutorial von Contact Manager abgeschlossen. Es gibt zwar noch viele weitere Funktionen, die wir der Anwendung hinzufügen könnten, aber nun haben wir die Grundlagen für das Erstellen einer voll funktionsfähigen Anwendung unter Verwendung der hervorragenden Backbone.js behandelt. Danke für das Lesen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.