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

Erstellen Sie einen Kontaktmanager mit Backbone.js: Teil 1

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 2

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Lernprogramm betrachten wir den Aufbau eines voll funktionsfähigen Kontaktmanagers mit Backbone.js, Underscore.js und jQuery. Wir schauen uns die grundlegenden Komponenten an, die Backbone aktivieren, sowie einige der von Underscore zur Verfügung gestellten Convenience-Methoden.


Was genau sind all diese Bibliotheken?

Backbone ist ein Architektur-Framework, das es uns ermöglicht, nicht-triviale JavaScript-Anwendungen zu erstellen, die MVC-ähnliche Organisation und Struktur verwenden. Backbone wird nicht als richtig angesehen. MVC - C ist für Collection not Controller gedacht, bietet aber viele der gleichen Vorteile und ermöglicht es uns, leistungsstarken und dennoch wartbaren Code zu schreiben.

Underscore ist eine Dienstprogrammbibliothek, die erweiterte Funktionen für JavaScript bereitstellt und zusätzliche Funktionen für die Arbeit mit Arrays, Sammlungen, Funktionen und Objekten hinzufügt.

Ich bin sicher, jQuery braucht hier keine Einführung.


Anfangen

Wir benötigen einen Root-Projektordner, der die Unterordner css, img und js enthält, also machen Sie jetzt weiter und erstellen Sie diese. Wir beginnen mit der folgenden HTML-Seite:

Speichern Sie dies als index.html im Stammprojektordner. Die einzige zwingende Voraussetzung von Backbone ist Underscore.js, aber wir möchten auch jQuery verwenden, sodass wir vor Backbone eine Verknüpfung zu diesen beiden Bibliotheken herstellen. Der Code unserer Anwendung wird in app.js und alle Stile in screen.css übernommen. Auf der Seite haben wir einen leeren Container, der die Grundlage unserer Anwendung bilden wird.

Als nächstes können wir die Skelett-JavaScript-Datei erstellen, die wir im Laufe dieser Serie nach und nach ausfüllen werden. Fügen Sie in einer neuen Datei den folgenden Code hinzu:

Speichern Sie dies im Ordner js als app.js. Wir werden unseren gesamten Code in eine anonyme Funktion stellen, die wir sofort aufrufen und jQuery als $ -Zeichen aliasieren. In diesem Stadium wird auch ein Array von Objekten definiert, wobei jedes Objekt einen Kontakt darstellt.

Wir werden diesen lokalen Datenspeicher für diesen Teil des Lernprogramms verwenden, da er es uns ermöglicht, einige Skripts zum Laufen zu bringen, ohne sich um die Synchronisierung mit einem Server kümmern zu müssen. Wir werden das für einen anderen Tag speichern!


Modelle

Ein Modell repräsentiert die Daten einer Anwendung; In unserer Anwendung wird dies ein individueller Kontakt sein, der Attribute wie einen Namen, eine Kontaktnummer usw. hat. Man könnte sagen, dass ein individuelles Modell den atomaren Teil der Anwendung darstellt - die kleinstmögliche Funktionseinheit. Fügen Sie den folgenden Code direkt nach dem Datenarray hinzu:

Um ein Modell in Backbone zu erstellen, erweitern wir einfach die Backbone.Model-Klasse mit der extend() -Methode. Wir können ein Objekt in die Methode übergeben, die es uns ermöglicht, das Modell mit unserer eigenen Funktionalität anzupassen. Eine der Eigenschaften, die wir in diesem Objekt festlegen können, heißt Defaults. Diese Eigenschaft ermöglicht es uns, Standardwerte für jedes Attribut zu konfigurieren, das unsere Modelle haben sollen.

In diesem Fall setzen wir ein Platzhalterbild als Standardwert für das photo attribut für Modellinstanzen. Alle Modelle, die dieses Attribut nicht haben, wenn sie definiert sind, erhalten es.

Modelle haben andere Eigenschaften, mit denen wir Funktionalität hinzufügen können. Wir könnten eine initialize() -Methode definieren, und diese Methode würde automatisch von Backbone für uns aufgerufen, wenn jedes Modell initialisiert wird. Wir werden das zur Zeit nicht nutzen, aber keine Sorge, wir werden später etwas später auf die Modelle zurückkommen.


Sammlungen

Eine Sammlung ist eine Klasse zum Verwalten von Modellgruppen. In diesem Beispiel verwenden wir einen einfachen, um alle unsere Kontakte zu speichern. Fügen Sie den folgenden Code direkt nach dem Contact modell hinzu:

Wie ein Modell ist eine Sammlung eine Backbone-Klasse, die wir erweitern, um benutzerdefinierte Funktionen hinzuzufügen, die für unsere Anwendung spezifisch sind. Sammlungen haben auch eine extend() -Methode und akzeptieren ein Objekt, mit dem wir Eigenschaften der Klasse festlegen und Verhalten hinzufügen können. Wir verwenden die Model eigenschaft, um der Sammlung mitzuteilen, aus welcher Klasse jedes Element in der Sammlung aufgebaut werden soll. In diesem Fall handelt es sich um eine Instanz unseres Contact modells. Machen Sie sich keine Sorgen darüber, dass die Klassen, die wir bisher definiert haben, extrem einfach erscheinen. Wir werden in späteren Abschnitten des Tutorials weitere Funktionen hinzufügen.


Ansichten

Ansichten sind dafür verantwortlich, die Daten der Anwendung in einer HTML-Seite anzuzeigen. Einer der Vorteile der Trennung der Teile der Anwendung, die die Daten verarbeiten, und der Teile, die die Daten anzeigen, besteht darin, dass wir sehr leicht eine Änderung an einer vornehmen können, ohne dass für die andere umfangreiche Änderungen erforderlich sind. Wir verwenden einige Ansichten in unserer Anwendung, von denen die erste direkt nach der Directory-Klasse hinzugefügt werden sollte:

Diese Ansicht behandelt die Anzeige eines einzelnen Kontakts. Genau wie Modelle und Auflistungen verfügen Ansichten über eine extend() -Methode, um die Backbone.View-Klasse zu erweitern. Wir haben mehrere Instanzeigenschaften aus unserer Sicht festgelegt; Die Eigenschaft TagName wird verwendet, um den Container für die Ansicht anzugeben, und die Eigenschaften className geben einen className an, der diesem Container hinzugefügt wird. Wir verwenden eine einfache Vorlage in unserer HTML-Datei, um jeden Kontakt zu rendern, sodass die template schaft einen zwischengespeicherten Verweis auf die Vorlage speichert, die wir mithilfe von jQuery aus der Seite auswählen.

Als nächstes definieren wir eine render() -Funktion; Diese Funktion wird von Backbone nicht automatisch aufgerufen, und während wir sie von der automatisch aufgerufenen initialize() -Methode aufrufen können, um die Ansicht selbst zu rendern, müssen wir dies in diesem Fall nicht tun.

Innerhalb der Methode render() speichern wir einen Verweis auf die Methode template() von Underscore und übergeben ihr die gespeicherte Vorlage. Wenn ein einzelnes Argument übergeben wird, das eine Vorlage enthält, ruft Underscore es nicht sofort auf, sondern gibt eine Methode zurück, die aufgerufen werden kann, um die Vorlage tatsächlich zu rendern.

Wir setzen dann den HTML-Inhalt des Elements <article>, das von der Ansicht erstellt wurde, auf die interpolierte Vorlage unter Verwendung der html() - Methode von jQuery. Dies geschieht durch Aufrufen der Templating-Funktion, die zuvor Underscore zurückgegeben hat, und Übergeben der zu interpolierenden Daten. Die Daten werden vom Modell mithilfe der toJSON() - Methode von Backbone für das Modell abgerufen. Interpolieren bedeutet nur, dass die Token innerhalb der Vorlage durch tatsächliche Daten ersetzt werden. Beachten Sie auch, dass wir $el verwenden, um den HTML-Inhalt festzulegen; Dies ist ein zwischengespeichertes jQuery-Objekt, das das aktuelle Element darstellt, sodass wir nicht weiterhin neue jQuery-Objekte erstellen müssen.

Am Ende der Methode render() geben wir das this-Objekt zurück, das auf die View-Instanz verweist, auf die die Methode render() aufgerufen wird. Dies ist so, dass wir andere Backbone-Methoden nach Aufruf der render() -Methode an die View-Instanz ketten können.


Micro Templating mit Unterstrich

Jetzt wäre wahrscheinlich ein geeigneter Zeitpunkt, um die integrierten Micro-Vorlagen von Underscore anzuschauen. Underscore stellt die template() -Methode zur Verfügung, um Templates zu konsumieren und zu interpolieren. Zu der HTML-Seite sollten wir die Vorlage hinzufügen, die wir verwenden werden; Fügen Sie den folgenden Code direkt nach dem Contacts-Container <div> hinzu:

Wir verwenden ein <script> -Element mit einem id-Attribut, damit wir es einfach auswählen können, und ein benutzerdefiniertes type-Attribut, damit der Browser nicht versucht, es auszuführen. In der Vorlage geben wir die HTML-Struktur an, die wir verwenden möchten, und verwenden  Token, um anzugeben, wo die Modelldaten eingefügt werden sollen. Es gibt ein paar andere Funktionen, die wir mit Underscore verwenden können, einschließlich der Interpolation von HTML-Escape-Werten oder der Ausführung von beliebigem JavaScript, aber wir müssen diese für die Zwecke dieses Tutorials nicht verwenden.


Eine Masteransicht

Um diesen Teil des Tutorials abzuschließen, erstellen wir eine weitere Ansicht. Unsere aktuelle Ansicht repräsentiert jeden einzelnen Kontakt und wird daher 1: 1 auf ein Modell abgebildet. Aber diese Ansicht wird nicht selbst gerendert und wir haben sie noch nicht aufgerufen. Was wir brauchen, ist eine Ansicht, die 1: 1 unserer Sammlung zuordnet, eine Master-Ansicht, die die richtige Anzahl von Kontaktansichten zur Anzeige jedes unserer Kontakte liefert. Fügen Sie direkt nach dem ContactView die folgende Klasse hinzu:

Diese Ansicht wird an ein Element angehängt, das bereits auf der Seite vorhanden ist, den leeren <body> Container, der fest in codiert ist. Daher wählen wir das Element mit jQuery aus und legen es als Eigenschaft el fest. Wenn Sie dann eine einfache initialize() - Funktion definieren, die eine Instanz unserer Collection-Klasse erstellt und dann ihre eigene render() -Methode aufruft, wird diese View selbst gerendert.

Wir definieren dann die render() - Methode für unsere Master-Ansicht. Innerhalb der Funktion speichern wir einen Verweis auf die Ansicht, so dass wir auf sie innerhalb einer Callback-Funktion zugreifen können, und verwenden dann die each() Methode von Underscore, um über jedes Modell in unserer Sammlung zu iterieren.

Diese Methode akzeptiert zwei Argumente (in dieser Form, obwohl sie auch mit nur einem Argument verwendet werden kann); Die erste ist die Sammlung von Elementen, die durchlaufen werden sollen, die zweite ist eine anonyme Funktion, die für jedes Element ausgeführt wird. Diese Callback-Funktion akzeptiert das aktuelle Element als Argument. Alles, was wir innerhalb dieser Callback-Funktion tun, ist, die renderContact()-Methode aufzurufen und ihr das aktuelle Element zu übergeben.

Zuletzt definieren wir die renderContact() Methode. In dieser Methode erstellen wir eine neue Instanz unserer ContactView-Klasse (denken Sie daran, die ContactView-Klasse repräsentiert einen einzelnen Kontakt) und legen Sie ihre Modelleigenschaft auf das Element fest, das an die Methode übergeben wird. Anschließend fügen wir das erstellte Element an, indem wir die render() -Methode der Sicht auf die Eigenschaft $el der Masteransicht DirectoryView (den leeren Container, den wir auf der Seite ausgewählt haben) aufrufen. Die Eigenschaft $el ist ein zwischengespeichertes jQuery-Objekt, das Backbone automatisch für uns erstellt.

Die Masteransicht ist verantwortlich für die Generierung jedes einzelnen Modells in unserer Sammlung. Alles, was wir tun müssen, ist unsere Masteransicht zu initialisieren, und da es sich selbst rendert, werden alle Kontakte angezeigt, die in dem Array von Dummydaten angegeben sind:

Wenn wir diese Seite jetzt in einem Browser ausführen, sollten wir eine visuelle Darstellung unserer Daten sehen:

Backbone erstellt für jedes Element in unserem ursprünglichen Array eine Instanz eines Modells, die in unserer Sammlung gespeichert und als Instanz einer Ansicht gerendert wird.

In diesem Tutorial geht es nicht um CSS, daher habe ich das Beispiel-CSS überhaupt nicht behandelt. Es ist nur einfaches CSS, wenn Sie neugierig sind, werfen Sie einen Blick auf das im Demo-Archiv enthaltene Stylesheet.


Zusammenfassung

In diesem Teil des Tutorials wurden einige der Kernkomponenten von Backbone.js vorgestellt. Modelle, Sammlungen und Ansichten. Modelle sind Klassen, die wir erstellen können, um Daten zu einer bestimmten Sache zu speichern und das Verhalten dafür zu definieren. Sammlungen werden zum Verwalten von Gruppen von Modellen verwendet, und Ansichten ermöglichen es uns, unsere Modelle mit interpolierten Vorlagen zu rendern, die die Daten unserer Modelle anzeigen.

Im nächsten Teil des Tutorials werden wir uns ansehen, wie wir unsere Sammlung filtern können, um nur eine Teilmenge unserer Modelle anzuzeigen. Wir werden uns auch eine andere Hauptkomponente von Backbone-Routern ansehen.

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.