Detaillierte Erläuterung des leichten Front-End-MVC-Frameworks CanJS

Wählen Sie die richtige Bibliothek

Das Erstellen einer JS-APP ohne gute Tools ist sehr schwierig. jQuery ist nur eine Bibliothek zum Betreiben von DOM und bietet keine Grundlage zum Erstellen von APPs. Deshalb benötigen wir eine spezielle Bibliothek wie CanJS.

CanJS ist eine leichte MVC-Bibliothek, die Ihnen die Tools bietet, die Sie zum Erstellen einer JS-APP benötigen.

CanJS ist eine leichte MVC-Bibliothek, die Ihnen die Tools zur Verfügung stellt, die Sie zum Erstellen einer JS-APP benötigen. Es bietet das Grundgerüst des MVC-Musters (Model-View-Control), dynamische Vorlagenbindung, Routenunterstützung und Speichersicherheit. Es unterstützt außerdem jQuery, Zepto, Mootools, YUI, Dojo und verfügt über eine Fülle von Erweiterungen und Plug-Ins.

Im ersten Teil erfahren Sie:
Erstellen Sie eine Steuerungsebene und eine Ansichtsebene (UI-Vorlage), um Kontakte anzuzeigen
Verwenden Sie die Modellebene „Modell“, um Daten darzustellen
Verwenden Sie das Fixtures-Plug-in, um Ajax-Rückgabedaten zu simulieren
Du musst aufgeregt sein! Beginnen wir mit dem Codieren.
Erstellen Sie Ihre Ordner und HTML
Sie erstellen zunächst einen Ordner für Ihre APP und erstellen dann vier Unterordner unter dem Verzeichnis: css, js, view und img. Wie folgt:
Kontakte_Manager
css
js
Ansichten
img

Speichern Sie den folgenden Code als index.html:

Code kopieren Der Code lautet wie folgt:

CanJS-Kontaktmanager

Am Ende der Seite laden Sie das erforderliche JS (einschließlich Ihrer APP:contacts.js).
Die im Tutorial verwendeten CSS- und Bilddateien stehen zum Download zur Verfügung.

Verwenden Sie View, um Ihre Benutzeroberfläche zu erstellen

Ansicht ist die UI-Vorlage, die zum Rendern Ihrer APP verwendet wird. CanJS unterstützt mehrere Template-Engines. Dieser Artikel verwendet EJS und unterstützt die dynamische Bindung.
Die Tags von EJS-Vorlagen sind HTML sehr ähnlich und unterstützen die Einbindung von JS-Code. Die drei häufig verwendeten Tags sind wie folgt:
<% CODE %>%20JS%20ausf%C3%BChren%0A<%= CODE %>%20F%C3%BChren%20Sie%20JS%20aus%20und%20schreiben%20Sie%20das%20nicht%20maskierte%20Ergebnis%20in%20den%20HTML-Code%20an%20der%20aktuellen%20Position%0A<%== CODE %>%20JS%20ausf%C3%BChren%20und%20das%20maskierte%20Ergebnis%20an%20der%20aktuellen%20Position%20in%20den%20HTML-Code%20schreiben%20(f%C3%BCr%20Untervorlagen).%0AVorlagen%20k%C3%B6nnen%20aus%20Dateien%20oder%20Skript-Tags%20geladen%20werden.%20Dieses%20Tutorial%20l%C3%A4dt%20aus%20EJS-Dateien.%20%0A

%0A

Kontakte%20anzeigen%0A

%0A

Um%20Kontakte%20zu%20erstellen,%20m%C3%BCssen%20Sie%20zun%C3%A4chst%20eine%20EJS-Vorlage%20erstellen%20und%20den%20folgenden%20Code%20als%20%E2%80%9EcontactsList.ejs%E2%80%9C%20in%20Ihrem%20Ansichtsordner%20speichern:%20

%0A

Code kopieren Der Code lautet wie folgt:

<% list(contacts, function(contact){ %>
 el.data('contact', contact) %>>

          <%== can.view.render('views/contactView.ejs', {

Kontakt: Kontakt, Kategorien: Kategorien

}) %>

<% }) %>

contactLists.ejs rendert eine Kontaktliste. Lassen Sie uns diese Vorlage analysieren:

Code kopieren Der Code lautet wie folgt:

<% list(contacts, function(contact){ %>

Wenn die Rückrufmethode in der list()-Methode mit einer Liste verwendet wird, die mit einem Beobachter konfiguriert ist, wird sie, sobald sich die Daten in der Liste ändern, wiederholt mithilfe der dynamischen Bindung aufgerufen.

Code kopieren Der Code lautet wie folgt:

el.data('contact', contact) %>>

Der obige Code generiert ein

mit Kontaktdaten über die Callback-Methode des Elements. Nachdem die Methode nach dem Pfeil ausgeführt wurde, werden die Daten des el-Objekts auf das entsprechende Element gesetzt.

Code kopieren Der Code lautet wie folgt:

<%== can.view.render('views/contactView.ejs', {

Kontakt: Kontakt, Kategorien: Kategorien

}) %>

Der obige Code rendert die Untervorlage contactView.ejs in einen Kontakt. can.view.render() gibt HTML mit Vorlage und Daten als Parameter zurück.

Einen einzelnen Kontakt rendern

Untervorlagen sind eine großartige Möglichkeit, Ansichten in überschaubare Abschnitte zu organisieren. Macht Ihre Vorlagen außerdem einfach und leicht wiederverwendbar. Diese Vorlage wird später im Tutorial zum Erstellen von Kontakten verwendet. Speichern Sie den folgenden Code als contactView.ejs im Ansichtenordner:

Code kopieren Der Code lautet wie folgt:

联系人的属性都放入了标签里，这就可以编辑更新用户的资料.

活化你的Ansicht（好文艺。。）

EJS 处理模板过程中如果有用到attr(),它周围的代码将会交由事件处理器管理，监听对应属性的变化, 当属性发生变化, APP中关联的UI将会被更新.这功能利益于模板动态绑定机制, EJS的动态绑定是有选择性的, 只有使用了attr()时才会为对应的属性开启.
我们通过 contactView.ejs 中一个标签来了解它的用法:

复制代码代码如下:

<%= contact.attr('name') ? "value='" contact.name "'" : "class='empty'" %>>

特殊标记里的代码将转变成事件绑定到此联系人的name属性上.当name属性发生变化，事件将被触发同时HTML结构会被更新.

使用can.Control来处理业务逻辑

can.Control ist eine vertrauenswürdige Software, ein Widget, ein Widget und ein Widget所需要数据为一个DOM元素创建一个Control实例, 可以在你的Control中定义方法绑定事件.
当 Control 所关联的元素从DOM被删除时，Contol会自去销毁自己，同时清除所绑定的方法.
Verwenden Sie die Funktion „Control“, um die Funktion „can.Control()“ zu verwenden 。
每个Contol实例都有几个重要的值和方法规范:
this – Control 实例的引用
this.element – 实例中你所创建的DOM 元素
this.options – 创建实例所需要的参数对象
init() – 当实例创建成功时被调用

管理联系人

将以下代码片段添加到contacts.js 文件来创建管理联系人的Control:

复制代码代码如下:

Kontakte = 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, führt init() zwei Dinge aus:
Verwenden Sie can.view(), um den Kontakt darzustellen. can.view() empfängt zwei Parameter: ein Datei- oder Stript-Tag, das Vorlage und Daten enthält; es gibt ein documentFragment zurück (einen kompakten Container, der DOM-Elemente verwaltet).
Verwenden Sie jQuery.html(), um das documentFragment von can.view() in das Control-Element
einzufügen

Modell zur Darstellung von Daten verwenden

Modell ist die Abstraktionsschicht von APP-Daten. Diese APP verwendet zwei Modelle: eines für Kontakte und eines für Kategorien. Fügen Sie den folgenden Code zu „contacts.js“ hinzu:

Code kopieren Der Code lautet wie folgt:

Kontakt = can.Model({

findAll: 'GET /contacts',

erstellen: „POST /Kontakte“,

Update: „PUT /contacts/{id}“,

zerstören: „DELETE /contacts/{id}“

},{});

Kategorie = can.Model({

findAll: 'GET /categories'

},{});

Ein Modell verfügt über 5 Methoden, die für CRUD-Daten definiert werden können, nämlich findAll, findOne, create, update und destroy. Sie können diese Methoden überschreiben, die beste Möglichkeit ist jedoch die Verwendung von REST-Diensten (Representational State Transfer). Wie im obigen Code können Sie die statischen Methoden, die in der APP nicht verwendet werden, getrost ignorieren.

Hier ist es wichtig hervorzuheben, dass es sich bei Modellinstanzen tatsächlich um von CanJS abgeleitete „Observablen“ handelt. can.Observe stellt den Beobachtermodus für Objekte bereit. can.Observe.List stellt den Beobachtungsmodus für Arrays bereit. Dies bedeutet, dass Sie Daten über attr() abrufen und festlegen und gleichzeitig Datenänderungen überwachen können.
Die Methode findAll() gibt eine Model.list zurück, das ist das Ereignis, das von can.Observe.List ausgelöst wird, wenn ein Element hinzugefügt oder entfernt wird.

Verwenden Sie Fixture, um Ruhe zu imitieren

Fixture fängt AJAX-Anfragen ab und simuliert Antworten über Dateien oder Methoden. Dies ist nützlich zum Testen oder wenn das Backend noch nicht bereit ist. Fixture ist das, was das APP-Modell benötigt, um REST zu simulieren.
Zuerst müssen Sie einige Daten für das Gerät vorbereiten und den folgenden Code hinzufügen:

Code kopieren Der Code lautet wie folgt:

var KONTAKTE = [
{
ID: 1,
Name: 'William',
Adresse: '1 CanJS Way',
E-Mail: 'william@husker.com',
Telefon: '0123456789',
Kategorie: „Mitarbeiter“
},
{
ID: 2,
Name: 'Laura',
Adresse: '1 CanJS Way',
E-Mail: 'laura@starbuck.com',
Telefon: '0123456789',
Kategorie: „Freunde“
},
{
ID: 3,
Name: 'Lee',
Adresse: '1 CanJS Way',
E-Mail: 'lee@apollo.com',
Telefon: '0123456789',
Kategorie: 'Familie'
}
];

var CATEGORIES = [
{
ID: 1,
Name: 'Familie',
Daten: 'Familie'
},
{
ID: 2,
Name: 'Freunde',
Daten: „Freunde“
},
{
ID: 3,
Name: 'Mitarbeiter',
Daten: „Mitarbeiter“
}
];

Sobald Sie die Daten haben, verbinden Sie sie mit einem Gerät, um REST zu simulieren. can.fixture() erhält zwei Parameter. Die URL, die wir abfangen möchten, sowie die Datei und Methode, mit der wir antworten. Normalerweise sind die URLs, die Sie abfangen möchten, dynamisch und folgen einem Muster. Fügen Sie einfach in {} eingeschlossene Platzhalterzeichen zur URL hinzu.

Fügen Sie den folgenden Code zu „contacts.js“ hinzu:

Code kopieren Der Code lautet wie folgt:

can.fixture('GET /contacts', function(){

return [KONTAKTE];

});

var id= 4;

can.fixture("POST /contacts", function(){

return {id: (id )}

});

can.fixture("PUT /contacts/{id}", function(){

return {};

});

can.fixture("DELETE /contacts/{id}", function(){

return {};

});

can.fixture('GET /categories', function(){

return [KATEGORIEN];

});

Die ersten vier Fixtures simulieren die GET-, POST-, PUT- und DELETE-Antworten des Contact-Modells, und das fünfte Fixture simuliert die GET-Antwort des Category-Modells.

APP starten

Ihre APP verfügt über ein Modell zum Verwalten von Daten, eine Ansicht zum Rendern von Kontakten und ein Steuerelement zum Organisieren des Ganzen. Jetzt müssen Sie nur noch die APP starten. Jetzt müssen Sie die Anwendung starten!
Fügen Sie den folgenden Code zu „contacts.js“ hinzu:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

$.when(Category.findAll(), Contact.findAll()).then(

Funktion(categoryResponse, contactResponse){

var Kategorien = CategoryResponse[0],

Kontakte = contactResponse[0];

neue Kontakte('#contacts', {

        Kontakte: Kontakte,

Kategorien: Kategorien

});

});

});

Lassen Sie uns diesen Code analysieren:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

Verwenden Sie die jQuery.ready-Methode, um die Bereitschaft des DOM zu überwachen.

Code kopieren Der Code lautet wie folgt:

$.when(Category.findAll(), Contact.findAll()).then(

function(categoryResponse, contactResponse){

Rufen Sie die findAll()-Methoden der beiden Modelle auf, um die Typen aller Kontakte abzurufen. Da findAll() eine Verzögerung aufweist, stellt $.when() sicher, dass beide Anforderungen gleichzeitig abgeschlossen werden, bevor die Rückrufmethode ausgeführt wird.

Code kopieren Der Code lautet wie folgt:

var Kategorien = CategoryResponse[0],

Kontakte = contactResponse[0];

Rufen Sie den der Modellinstanz entsprechenden Datensatz mit den beiden findAll()-Methoden ab. Ist das erste Element des von der Antwort zurückgegebenen Arrays.

Code kopieren Der Code lautet wie folgt:

neue Kontakte('#contacts', {

Kontakte: Kontakte,

Kategorien: Kategorien

});

Erstellen Sie ein Steuerelement für den Kontakt für das Element #contacts. Kontakt- und Typdatensätze werden an Control übergeben.
Öffnen Sie Ihre APP mit einem Browser. Sie sehen die folgende Kontaktliste:

Zusammenfassung

Dies ist der erste Artikel in der Tutorial-Reihe. Sie verstehen bereits den Kern von CanJS:
Modelle Eine Abstraktionsschicht für Ihre APP-Daten
Zeigt Vorlagen an, die Daten in HTML konvertieren
Controls organisiert alles

Verwandte Etiketten：

canjs mvc框架详解

Quelle：php.cn

Vorheriger Artikel：Sammlung von Methoden zum Abfangen von Zeichenfolgen in PHP-, JS- und CSS_Javascript-Kenntnissen Nächster Artikel：Eine kurze Analyse der Fähigkeiten zum Preloading/Lazy Loading_Javascript von js

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors