Wählen Sie die richtige Bibliothek aus
Es ist sehr schwierig, eine JS -App ohne gute Werkzeuge zu erstellen. JQuery ist nur eine Bibliothek für den Betrieb von DOM und bietet keine Grundlage für das Erstellen einer App. Aus diesem Grund wollen wir eine spezielle Bibliothek ähnlich wie Canjs.
CANJS ist eine leichte MVC -Bibliothek, die die Tools bietet, die Sie zum Erstellen einer JS -App benötigen.
CANJS ist eine leichte MVC -Bibliothek, die die Tools bietet, die Sie zum Erstellen einer JS -App benötigen. Es bietet ein grundlegendes Framework mit dem MVC-Modus (Modell-View-Control), dynamischer Vorlagenbindung, Routenunterstützung und Speichersicherheit. Es unterstützt auch JQuery, Zepto, Mootools, Yui, Dojo und verfügt über umfangreiche Erweiterungen und Plug-Ins.
Teil eins Sie lernen:
Erstellen Sie Steuer- und Ansichtsschichten (UI -Vorlagen), um Kontakte anzuzeigen
Verwenden Sie die Modellmodellschicht, um Daten darzustellen
Verwenden Sie das Feortures -Plugin, um AJAX zu simulieren, um Daten zurückzugeben
Sie müssen aufgeregt sein! Beginnen wir mit dem Codieren.
Erstellen Sie Ihre Ordner und HTML
Sie erstellen zuerst einen Ordner für Ihre App und erstellen dann 4 Unterordner im Verzeichnis: CSS, JS, Ansichten und IMG. wie folgt:
contacts_manager
CSS
JS
Ansichten
img
Speichern Sie den folgenden Code als index.html:
Die Codekopie lautet wie folgt:
<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> CanJS -Kontaktmanager </title>
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/contacts.css">
</head>
<body>
<div>
<div>
<div>
<h1> Kontakte Manager </h1>
</div>
</div>
<div>
<div>
<div>
<nav id = "filter"> </nav>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "Kontakte"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixure.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
Am Ende der Seite laden Sie die erforderlichen JS (einschließlich Ihrer App: contacts.js).
Die im Tutorial verwendeten CSS und Bilddateien können heruntergeladen werden.
Verwenden Sie die Ansicht, um Ihre Benutzeroberfläche zu erstellen
Die Ansicht wird verwendet, um die UI -Vorlage Ihrer App zu rendern. CANJS unterstützt eine Vielzahl von Vorlagenmotoren. In diesem Artikel wird EJS verwendet, das dynamische Bindung umfasst und unterstützt.
Die Tags von EJS -Vorlagen sind HTML sehr ähnlich und unterstützen JS -Code. Die drei häufig verwendeten Tags sind wie folgt:
< % Code %> JS ausführen
< %= Code %> JS ausführen und nicht abgebildete Ergebnisse an HTML am aktuellen Standort schreiben
< %== Code %> Führen Sie JS aus und schreiben Sie das entkommene Ergebnis an HTML am aktuellen Ort (für Sub-Templates).
Die Vorlage kann aus einer Datei oder einem Skript -Tag geladen werden, und dieses Tutorial wird aus einer EJS -Datei geladen.
Kontakte anzeigen
Um einen Kontakt zu erstellen, müssen Sie zuerst eine EJS -Vorlage erstellen und den folgenden Code als contactSlist.ejs in Ihrem Ansichtenordner speichern:
Die Codekopie lautet wie folgt:
<ul>
< % Liste (Kontakte, Funktion (Kontakt) { %>
<li < %= (el)-> el.data ('Kontakt', Kontakt) %>>
<%== Can.view.render ('Ansichten/contactView.ejs', {{
Kontakt: Kontakt, Kategorien: Kategorien
}) %>
</li>
< %}) %>
</ul>
contactLists.ejs rendert eine Kontaktliste. Lassen Sie uns diese Vorlage analysieren:
Die Codekopie lautet wie folgt:
< % Liste (Kontakte, Funktion (Kontakt) { %>
Wenn die Callback -Methode in der List () -Methode in Verbindung mit der Liste mit dem Beobachter verwendet wird, wird sie wiederholt unter Verwendung der dynamischen Bindung aufgerufen, sobald sich die Daten der Liste ändert.
Die Codekopie lautet wie folgt:
<li < %= (el)-> el.data ('Kontakt', Kontakt) %>>
Der obige Code generiert eine <li> mit Kontaktdaten über die Rückrufmethode des Elements. Nach der Methode nach der Ausführung des Pfeils werden die Daten des EL -Objekts auf das entsprechende Element eingestellt.
Die Codekopie lautet wie folgt:
<%== Can.view.render ('Ansichten/contactView.ejs', {{
Kontakt: Kontakt, Kategorien: Kategorien
}) %>
Der obige Code macht die sub-template contactView.ejs zu einer Kontaktperson. Can.view.render () gibt HTML mit Vorlage und Daten als Parameter zurück.
Einen einzigen Kontakt rendern
Sub-Templates sind eine gute Möglichkeit, Ansichten in überschaubare Blöcke zu organisieren. Es erleichtert auch Ihre Vorlagen einfach und leicht wiederzuverwenden. Diese Vorlage wird später im Tutorial verwendet, um einen Kontakt zu erstellen, den folgenden Code als contactView.ejs zu speichern und den Ordner der Ansicht einzugeben:
Die Codekopie lautet wie folgt:
<a href = "javaScript: //"> <i> </i> </a>
<form>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<Eingabe type = "text" name = "name" placeholder = "Name hinzufügen"
<%= contact.attr ('Name')? "value = '" + contact.name + "'": "class = 'leer'" %>>
<select name = "category">
< % $ .ach (Kategorien, Funktion (i, Kategorie) { %>
<Option Value = "<%= category.data%>" <%= contact.category === Kategorie.Data? "ausgewählt": "" %>>
< %= Kategorie.name %>
</Option>
< %}) %>
</select>
</div>
<div>
<Label> Adresse </label>
<Eingabe type = "text" name = "Adresse"
<%= contact.attr ('Adresse')? "value = '" + contact.address + "'": "class = 'leer'" %>>
<Label> Telefon </label>
<Eingabe type = "text" name = "Telefon"
<%= contact.attr ('Telefon')? "value = '" + contact.phone + "'": "class = 'leer'" %>>
<Label> E -Mail </label>
<Eingabe type = "text" name = "mail" "
<%= contact.attr ('E -Mail')? "value = '" + contact.email + "'": "class = 'leer'" %>>
</div>
</div>
</form>
Die Kontaktattribute werden in das <eingabe> -Tag platziert, mit denen Sie die Informationen des Benutzers bearbeiten und aktualisieren können.
Revitalisieren Sie Ihre Ansicht (gute Literatur ..)
Wenn attr () während der EJS -Verarbeitungsvorlage verwendet wird, wird der Code um ihn herum an den Ereignisprozessor übergeben, um die Änderungen in den entsprechenden Attributen zu überwachen. Wenn sich die Attribute ändern, wird die zugehörige Benutzeroberfläche in der App aktualisiert. Diese Funktion profitiert vom dynamischen Bindungsmechanismus der Vorlagen. Die dynamische EJS -Bindung ist selektiv und wird nur für die entsprechenden Attribute aktiviert, wenn attr () verwendet wird.
Wir verwenden ein <eingabe> -Tag in contactView.ejs, um die Verwendung zu verstehen:
Die Codekopie lautet wie folgt:
<Eingabe type = "text" name = "name" placeholder = "Name hinzufügen"
<%= contact.attr ('Name')? "value = '" + contact.name + "'": "class = 'leer'" %>>
Der Code im Spezial -Tag wird in ein Ereignis konvertiert und an das Namensattribut dieses Kontakts gebunden. Wenn sich das Namensattribut ändert, wird das Ereignis ausgelöst und die HTML -Struktur aktualisiert.
Verwenden Sie Can.control, um die Geschäftslogik zu bewältigen
Can.Control erstellt eine organisierte, intern leckere, vollständige Kontrolle, mit der Widgets erstellt oder Geschäftslogik verarbeitet werden kann. Sie erstellen eine Steuerinstanz für ein DOM -Element über die erforderlichen Daten und können Methodenbindungsereignisse in Ihrer Kontrolle definieren.
Wenn das mit der Kontrolle verbundene Element aus dem DOM gelöscht wird, zerstört die Kontrolle sich selbst und löscht die gebundene Methode.
Erstellen eines Steuerelements, erben Sie, indem Sie das von Ihnen definierte Objekt übergeben, der die Funktion an Can.Control () enthält. Der nächste Vorfall wurde ebenfalls gemeldet.
Jede Kontrollinstanz hat mehrere wichtige Werte und Methodenspezifikationen:
Verweise auf diese Kontrollinstanz
Das DOM -Element, das Sie in dieser Instanz erstellt haben
this.options Parameterobjekte, die zum Erstellen einer Instanz erforderlich sind
Init () wird aufgerufen, wenn die Instanz erfolgreich erstellt wird
Kontakte verwalten
Fügen Sie der Datei contacts.js den folgenden Code -Snippet hinzu, um eine Steuerung für die Verwaltung von Kontakten zu erstellen:
Die Codekopie lautet wie folgt:
Contacts = can.control ({{{
init: function () {
this.element.html (Can.view ('Views/contactSlist.ejs', {{
Kontakte: this.options.contacts,,
Kategorien: this.options.categories
}));
}
})
Wenn eine Instanz von Kontakten erstellt wird, macht init () zwei Dinge:
Verwenden Sie Can.View (), um Kontakte zu rendern. Can.View () empfängt zwei Parameter: eine Datei mit Vorlagen und Daten oder einem Strip -Tag; Es gibt eine Dokumentfragment zurück (einen leichten Container, der DOM -Elemente verwaltet).
Verwenden Sie jQuery.html (), um die Dokumentfragment von Can.view () in das Element der Steuerung einzufügen
Verwenden Sie das Modell, um Daten darzustellen
Modell ist die abstrakte Ebene der App -Daten. Diese App verwendet zwei Modelle: eine, die der Kontaktperson und der anderen entspricht, die der Kategorie entspricht. Fügen Sie den folgenden Code zu contacts.js hinzu:
Die Codekopie lautet wie folgt:
Contact = can.model ({{{
Findall: 'Get /Kontakte',
erstellen: "Post /Kontakte",
Update: "Put /Kontakte /{ID}",
zerstören: "Kontakte /{id} delete /contacts" "
}, {});
Category = can.model ({{
Findall: 'Get /Kategorien'
}, {});
Ein Modell verfügt über 5 Methoden, die CRUD -Daten definieren können, nämlich Findall, Findone, Erstellen, Aktualisierung und Zerstören. Sie können diese Methoden umschreiben, aber der beste Weg ist die Nutzung des REST -Dienstes (Repräsentationsstatusübertragung). Genau wie im obigen Code können Sie sich Sorgen machen, die statischen Methoden zu ignorieren, die nicht in der App verwendet werden.
Es ist wichtig, hier darauf hinzuweisen, dass die Modellinstanz tatsächlich "Observables" von CANJS ist. Can.observe liefert das Beobachtermuster eines Objekts Can.observe.List liefert das Beobachtungsmuster eines Arrays. Dies bedeutet, dass Sie Daten über attr () erhalten und festlegen können, während Sie nach Änderungen der Daten anhören.
Die findAll () -Methode gibt eine Modellliste zurück. Die von Can.observe.list ausgelöste Ereignis, wenn das Element hinzugefügt oder entfernt wird.
Verwenden Sie eine Leuchte, um die Ruhe nachzuahmen
Die Fixture fällt AJAX an und simuliert die Antwort durch Dateien oder Methoden. Dies ist sehr nützlich für das Testen oder wenn das Backend nicht fertig ist. Fixture ist das, was das App -Modell simuliert.
Zunächst müssen Sie einige Daten zum Fixieren vorbereiten und den folgenden Code hinzufügen, um:
Die Codekopie lautet wie folgt:
var contacts = [
{
ID: 1,
Name: 'William',
Adresse: '1 canjs way',
E -Mail: '[email protected]',
Telefon: '0123456789',
Kategorie: 'Mitarbeiter'
},
{
ID: 2,
Name: 'Laura',
Adresse: '1 canjs way',
E -Mail: '[email protected]',
Telefon: '0123456789',
Kategorie: 'Freunde'
},
{
ID: 3,
Name: 'Lee',
Adresse: '1 canjs way',
E -Mail: '[email protected]',
Telefon: '0123456789',
Kategorie: "Familie"
}
];
var kategorien = [
{
ID: 1,
Name: 'Familie',
Daten: "Familie"
},
{
ID: 2,
Name: 'Freunde',
Daten: 'Freunde'
},
{
ID: 3,
Name: 'Kollegen',
Daten: 'Mitarbeiter'
}
];
Schließen Sie es mit den Daten an die Fixture an, um die Ruhe zu simulieren. Can.Fixure () empfängt zwei Parameter. Die URL, die wir abfangen möchten, und die Dateien und Methoden, auf die wir reagieren. Normalerweise sind die URLs, die Sie abfangen möchten, dynamisch und folgen einem Muster. Fügen Sie einfach Wildcards mit {} in der URL hinzu.
Fügen Sie den folgenden Code zu contacts.js hinzu:
Die Codekopie lautet wie folgt:
Can.Fixure ('get /contacts', function () {
Rückgabe [Kontakte];
});
var id = 4;
Can.Fixure ("Post /Kontakte", function () {
return {id: (id ++)}
});
Can.Fixure ("put /contacts /{id}", function () {
zurückkehren {};
});
Can.Fixure ("" Kontakte /{id} ", function () {
zurückkehren {};
});
Can.Fixure ('get /kategorien', function () {
Rückgabe [Kategorien];
});
Die ersten vier Leuchten simulieren die Antworten des Kontaktmodells GET, Post, Put und Löschen und simuliert die fünfte Antwort des Kategoriemodells.
Starten Sie die App
Ihre App verfügt über ein Modell, das Daten verwaltet, Kontaktansichten macht und dies alles in die Kontrolle organisiert. Alles, was Sie jetzt tun müssen, ist, die App zu starten. Jetzt müssen Sie die Anwendung starten!
Fügen Sie den folgenden Code zu contacts.js hinzu:
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (function () {
$ .when (category.findall (), contact.findall ()). Dann ((
function (categoryResponse, contactesponse) {
var kategorien = categoryResponse [0],
Kontakte = contacteRsponse [0];
Neue Kontakte ('#Kontakte', {
Kontakte: Kontakte,
Kategorien: Kategorien:
});
});
});
Lassen Sie uns diesen Code analysieren:
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (function () {
Verwenden Sie die Methode jQuery.ready, um auf die Fertigstellung des DOM zu hören.
Die Codekopie lautet wie folgt:
$ .when (category.findall (), contact.findall ()). Dann ((
function (categoryResponse, contactesponse) {
Rufen Sie die Findall () -Methode von zwei Modellen an, um die Arten aller Kontakte zu erhalten. Da findAll () eine Verzögerung hat, stellt $ .when () sicher, dass die Rückrufmethode erst ausgeführt wird, nachdem die beiden Anfragen gleichzeitig abgeschlossen sind.
Die Codekopie lautet wie folgt:
var kategorien = categoryResponse [0],
Kontakte = contacteRsponse [0];
Holen Sie sich den Datensatz der entsprechenden Modellinstanz aus den beiden findAll () -Methoden. ist das erste Element des Arrays, das durch die Antwort zurückgegeben wird.
Die Codekopie lautet wie folgt:
Neue Kontakte ('#Kontakte', {
Kontakte: Kontakte,
Kategorien: Kategorien:
});
Erstellt eine Kontrolle über den Kontakt für das Element #Contacts. Kontakt- und Typ -Datensätze werden an die Steuerung gesendet.
Öffnen Sie Ihre App mit einem Browser und Sie sehen die folgende Kontaktliste:
Zusammenfassen
Dies ist das erste Kapitel in der Tutorial -Serie, und Sie haben bereits etwas über den Kern von CANJS erfahren:
Models Abstraktionsschicht Ihrer App -Daten
Ansichten Vorlagen, die Daten in HTML umwandeln
Kontrollierte Organisationen beziehen sich auf alles