Sélectionnez la bonne bibliothèque
Il est très difficile de créer une application JS sans bons outils. JQuery n'est qu'une bibliothèque pour le fonctionnement DOM et ne fournit aucune base pour créer une application. C'est pourquoi nous voulons une bibliothèque spéciale similaire aux canjs.
Canjs est une bibliothèque MVC légère qui fournit les outils dont vous avez besoin pour créer une application JS.
Canjs est une bibliothèque MVC légère qui fournit les outils dont vous avez besoin pour créer une application JS. Il fournit un framework de base avec le mode MVC (modèle-View-Control), la liaison dynamique du modèle, la prise en charge de l'itinéraire et la sécurité de la mémoire. Il prend également en charge JQuery, Zepto, Mootools, Yui, Dojo, et a de riches extensions et plug-ins.
Première partie que vous apprendrez:
Créer des couches de contrôle et d'affichage (modèles d'interface utilisateur) pour afficher les contacts
Utilisez la couche modèle de modèle pour représenter les données
Utiliser le plugin de luminaires pour simuler Ajax pour retourner les données
Vous devez être excité! Commençons le codage.
Créez vos dossiers et HTML
Vous créez d'abord un dossier pour votre application, puis créez 4 sous-dossiers dans le répertoire: CSS, JS, vues et IMG. comme suit:
contacts_manager
CSS
js
vues
IMG
Enregistrez le code suivant en tant qu'index.html:
La copie de code est la suivante:
<! doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Canjs Contacts Manager </Title>
<link rel = "Stylesheet" href = "css / bootstrap.min.css">
<link rel = "stylesheet" href = "css / contacts.css">
</ head>
<body>
<div>
<div>
<div>
<h1> Contacts Manager </H1>
</div>
</div>
<div>
<div>
<div>
<nav id = "filter"> </ nav>
</div>
</div>
<div>
<div id = "Create"> </div>
<div id = "contacts"> </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.fixture.js"> </ script>
<script src = "js / contacts.js"> </ script>
</docy>
</html>
Au bas de la page, vous chargez le JS requis (y compris votre application: contacts.js).
Le CSS et les fichiers image utilisés dans le tutoriel peuvent être téléchargés.
Utilisez la vue pour créer votre interface utilisateur
La vue est utilisée pour rendre le modèle d'interface utilisateur de votre application. Canjs prend en charge une variété de moteurs de modèles. Cet article utilise EJS, qui comprend et prend en charge la liaison dynamique.
Les étiquettes des modèles EJS sont très similaires à HTML et à la prise en charge contenant du code JS. Les trois balises couramment utilisées sont les suivantes:
<% Code%> Exécuter JS
<% = Code%> Exécuter JS et écrire des résultats non espérés à HTML à l'emplacement actuel
<% == Code%> Exécuter JS et écrire le résultat échappé à HTML à l'emplacement actuel (pour les sous-tempates).
Le modèle peut être chargé à partir d'un fichier ou d'une balise de script, et ce didacticiel est chargé à partir d'un fichier EJS.
Afficher les contacts
Pour créer un contact, vous devez d'abord créer un modèle EJS et enregistrer le code suivant en tant que ContactsList.ejs dans votre dossier de vues:
La copie de code est la suivante:
<ul>
<% liste (contacts, fonction (contact) {%>
<li <% = (el) -> el.data ('contact', contact)% >>
<% == can.view.render ('vues / contactView.ejs', {
Contact: Contact, Catégories: Catégories
})%>
</li>
<%})%>
</ul>
Contactlists.ejs rendra une liste de contacts. Analysons ce modèle:
La copie de code est la suivante:
<% liste (contacts, fonction (contact) {%>
Si la méthode de rappel dans la méthode List () est utilisée en conjonction avec la liste avec l'observateur, elle sera appelée à plusieurs reprises en utilisant la liaison dynamique une fois que les données de la liste changent.
La copie de code est la suivante:
<li <% = (el) -> el.data ('contact', contact)% >>
Le code ci-dessus génère un <li> avec les données de contact via la méthode de rappel de l'élément. Une fois la méthode après l'exécution de la flèche, les données de l'objet EL sont définies sur l'élément correspondant.
La copie de code est la suivante:
<% == can.view.render ('vues / contactView.ejs', {
Contact: Contact, Catégories: Catégories
})%>
Le code ci-dessus rend le sous-modèle ContactView.ejs en une personne de contact. can.view.render () renvoie HTML avec le modèle et les données sous forme de paramètres.
Rendre un seul contact
Les sous-modèles sont un bon moyen d'organiser les vues sur des blocs gérables. Cela rend également vos modèles simples et faciles à réutiliser. Ce modèle sera utilisé plus loin dans le tutoriel pour créer un contact, enregistrez le code suivant sous le nom de contactView.ejs et entrez le dossier des vues:
La copie de code est la suivante:
<a href = "javascript: //"> <i> </i> </a>
<formulaire
<div>
<div>
<img src = "img / contact.png">
</div>
<div>
<input type = "text" name = "name" placeholder = "ajouter name"
<% = contact.attr ('name')? "value = '" + contact.name + "'": "class = 'vide'"% >>
<select name = "catégorie">
<% $ .each (catégories, fonction (i, catégorie) {%>
<Option Value = "<% = catégorie.data%>" <% = contact.category === catégorie.data? "Sélectionné": ""% >>
<% = catégorie.name%>
</opoption>
<%})%>
</lect>
</div>
<div>
<babline> Adresse </Babe>
<input type = "text" name = "adresse"
<% = contact.attr ('adresse')? "value = '" + contact.address + "'": "class = 'vide'"% >>
<étiquet> Téléphone </bétique>
<entrée type = "text" name = "téléphone"
<% = contact.attr ('téléphone')? "value = '" + contact.phone + "'": "class = 'vide'"% >>
<DeLabe> Email </Babe>
<entrée type = "text" name = "e-mail"
<% = contact.attr ('e-mail')? "value = '" + contact.email + "'": "class = 'vide'"% >>
</div>
</div>
</ form>
Les attributs de contact sont placés dans la balise <port>, qui vous permet de modifier et de mettre à jour les informations de l'utilisateur.
Revitalisez votre point de vue (bonne littérature ..)
Si ARTR () est utilisé pendant le modèle de traitement EJS, le code qui l'entoure sera remis au processeur d'événements pour surveiller les modifications des attributs correspondants. Lorsque les attributs changent, l'interface utilisateur associée dans l'application sera mise à jour. Cette fonction bénéficie du modèle de liaison dynamique du modèle. La liaison dynamique EJS est sélective et ne sera activée que pour les attributs correspondants lorsque ARTR () est utilisé.
Nous utilisons une balise <port> dans ContactView.ejs pour comprendre son utilisation:
La copie de code est la suivante:
<input type = "text" name = "name" placeholder = "ajouter name"
<% = contact.attr ('name')? "value = '" + contact.name + "'": "class = 'vide'"% >>
Le code de la balise spéciale sera converti en un événement et lié à l'attribut de nom de ce contact. Lorsque l'attribut de nom change, l'événement sera déclenché et la structure HTML sera mise à jour.
Utiliser Can.Control pour gérer la logique métier
Can.Control crée un contrôle complet organisé et sans fuite en interne qui peut être utilisé pour créer des widgets ou gérer la logique métier. Vous créez une instance de contrôle pour un élément DOM via les données requises, et vous pouvez définir des événements de liaison de méthode dans votre contrôle.
Lorsque l'élément associé au contrôle est supprimé du DOM, le contrôle se détruira et effacera la méthode liée.
Pour créer un contrôle, héritez en passant dans l'objet que vous avez défini contenant la fonction à can.Control (). L'incident suivant a également été signalé.
Chaque instance de contrôle a plusieurs valeurs et spécifications de méthode importantes:
Références à cette instance de contrôle
L'élément DOM que vous avez créé dans cette instance.
this.options paramètre objets requis pour créer une instance
init () est appelé lorsque l'instance est créée avec succès
Gérer les contacts
Ajoutez l'extrait de code suivant dans le fichier contacts.js pour créer un contrôle pour gérer les contacts:
La copie de code est la suivante:
Contacts = can.Control ({
init: function () {
this.element.html (can.view ('vues / contactslist.ejs', {
contacts: this.options. contacts,
Catégories: this.options. catégories
}));
}
})
Lorsqu'une instance de contacts est créée, init () fait deux choses:
Utiliser can.view () pour rendre les contacts. can.view () reçoit deux paramètres: un fichier contenant des modèles et des données ou une balise de bande; Il renvoie un DocumentFragment (un conteneur léger qui gère les éléments DOM).
Utilisez jQuery.html () pour insérer le document Fragment de can.view () dans l'élément du contrôle
Utiliser le modèle pour représenter les données
Le modèle est la couche abstraite des données de l'application. Cette application utilise deux modèles: l'un correspondant à la personne de contact et l'autre correspondant à la catégorie. Ajoutez le code suivant à contacts.js:
La copie de code est la suivante:
Contact = can.Model ({
findall: 'get / contacts',
Créer: "Post / Contacts",
Mise à jour: "put / contacts / {id}",
Détruiser: "Delete / Contacts / {id}"
}, {});
Catégorie = can.Model ({
Findall: 'Get / Catégories'
}, {});
Un modèle a 5 méthodes qui peuvent définir les données CRUD, à savoir trouver, trouver, créer, mettre à jour et détruire. Vous pouvez réécrire ces méthodes, mais la meilleure façon est d'utiliser le service de repos (transfert d'état de représentation). Tout comme le code ci-dessus, vous pouvez vous soucier d'ignorer les méthodes statiques qui ne seront pas utilisées dans l'application.
Il est important de souligner ici que l'instance de modèle est en fait des «observables» à partir de canjs. can.Observe fournit le modèle d'observateur d'un objet can.observe.list fournit le modèle d'observation d'un tableau. Cela signifie que vous pouvez obtenir et définir des données via ARTR () tout en écoutant des changements de données.
La méthode findall () renvoie un modèle.List, qui est l'événement déclenché par can.observe.list lorsque l'élément est ajouté ou supprimé.
Utilisez le luminaire pour imiter le repos
Le luminaire intercepte les demandes AJAX et simule la réponse via des fichiers ou des méthodes. Ceci est très utile pour les tests ou lorsque le backend n'est pas prêt. Le luminaire est ce que le modèle d'application simule.
Tout d'abord, vous devez préparer des données pour le luminaire et ajouter le code suivant à:
La copie de code est la suivante:
var contacts = [
{
ID: 1,
Nom: 'William',
Adresse: «1 Canjs Way»,
Courriel: «[email protected]»,
Téléphone: «0123456789»,
Catégorie: «collègues»
},
{
ID: 2,
Nom: «Laura»,
Adresse: «1 Canjs Way»,
Courriel: «[email protected]»,
Téléphone: «0123456789»,
Catégorie: «amis»
},
{
ID: 3,
Nom: «Lee»,
Adresse: «1 Canjs Way»,
Envoyez un courriel: «[email protected]»,
Téléphone: «0123456789»,
Catégorie: «famille»
}
]]
var catégories = [
{
ID: 1,
Nom: «Famille»,
Données: «famille»
},
{
ID: 2,
Nom: «amis»,
Données: «Amis»
},
{
ID: 3,
Nom: «collègues»,
Données: «collègues»
}
]]
Avec les données, connectez-la au luminaire pour simuler le repos. can.fixture () reçoit deux paramètres. L'URL que nous voulons intercepter et les fichiers et méthodes auxquels nous répondons. Habituellement, les URL que vous souhaitez intercepter sont dynamiques et suivent un modèle. Il suffit d'ajouter des caractères génériques enfermés avec {} dans l'URL.
Ajoutez le code suivant à contacts.js:
La copie de code est la suivante:
can.fixture ('get / contacts', function () {
retour [contacts];
});
var id = 4;
can.fixture ("post / contacts", function () {
return {id: (id ++)}
});
can.fixture ("put / contacts / {id}", function () {
retour {};
});
can.fixture ("delete / contacts / {id}", function () {
retour {};
});
can.fixture ('get / catégories', function () {
retour [catégories];
});
Les quatre premiers luminaires simulent les réponses GET, Publier, mettre et supprimer le modèle de contact, et le cinquième simule la réponse GET du modèle de catégorie.
Démarrer l'application
Votre application a un modèle qui gère les données, rend les vues des contacts et organise tout cela en contrôle. Tout ce que vous avez à faire maintenant est de démarrer l'application. Vous devez maintenant lancer l'application!
Ajoutez le code suivant à contacts.js:
La copie de code est la suivante:
$ (document) .ready (function () {
$ .when (catégorie.findall (), contact.findall ()). puis (
Fonction (catégorieResponse, contactPonse) {
var catégories = catégorieResponse [0],
contacts = contactPonse [0];
Nouveaux contacts ('# contacts', {
Contacts: contacts,
Catégories: Catégories:
});
});
});
Analysons ce code:
La copie de code est la suivante:
$ (document) .ready (function () {
Utilisez la méthode jQuery.ready pour écouter le prêt du dom.
La copie de code est la suivante:
$ .when (catégorie.findall (), contact.findall ()). puis (
Fonction (catégorieResponse, contactPonse) {
Appelez la méthode findall () de deux modèles pour obtenir les types de tous les contacts. Étant donné que Findall () a un retard, $ .When () garantit que la méthode de rappel n'est exécutée qu'après la fin des deux demandes en même temps.
La copie de code est la suivante:
var catégories = catégorieResponse [0],
contacts = contactPonse [0];
Obtenez l'ensemble de données de l'instance de modèle correspondante à partir des deux méthodes findall (). est le premier élément du tableau renvoyé par la réponse.
La copie de code est la suivante:
Nouveaux contacts ('# contacts', {
Contacts: contacts,
Catégories: Catégories:
});
Crée un contrôle du contact pour l'élément #Contacts. Les ensembles de données de contact et de type sont envoyés pour contrôler.
Ouvrez votre application avec un navigateur et vous verrez la liste de contacts suivante:
Résumer
Ceci est le premier chapitre de la série Tutorial, et vous avez déjà appris le cœur des canjs:
Modèles de la couche abstraction des données de votre application
Vues modèles qui convertissent les données en HTML
Les organisations de contrôle se rapportent à tout