<%== can.view.render('views/contactView.ejs',  contact: contact, categories: categories ) %>

Ce code rend le contactView.ejs sous-modèle pour chaque contact. can.view.render () prend un modèle et des données en tant que paramètres et renvoie HTML.

Rendre un contact unique

Les sous-modèles sont un excellent moyen d'organiser vos vues en morceaux gérables. Ils aident également à simplifier vos modèles et à promouvoir DRY (Don't Repeat Yourself). Plus loin dans ce didacticiel, vous réutiliserez ce modèle pour créer des contacts. Enregistrez ce code sous contactView.ejs dans votre dossier de vues:

  
 
 
  
 
 >  <% $.each(categories, function(i, category) %> > <%= category.name %>  <% ) %>  
 
 Adresse > Téléphone > Email > 
 
 

Chaque propriété d’un contact est placée dans un étiquette. Ceux-ci seront utilisés pour ajouter et mettre à jour les informations d'un contact.

Faire vivre vos points de vue

À tout moment, rencontre EJS attr () lors du traitement d'un modèle, il sait que le code environnant doit être transformé en un gestionnaire d'événements lié aux modifications de cette propriété. Lorsque la propriété est modifiée ailleurs dans l'application, le gestionnaire d'événements est déclenché et votre interface utilisateur est mise à jour. Ceci est appelé liaison en direct. La liaison EJS Live est activée. Il ne s'allume que si vous utilisez attr () accéder aux propriétés.

Regardons l'un des balises de la contactView.ejs pour voir comment cela fonctionne:

 >

Le code contenu dans les balises magiques deviendra un gestionnaire d'événements lié à la propriété du nom du contact. Lorsque nous mettons à jour la propriété name, le gestionnaire d'événements est exécuté et le code HTML est mis à jour..

Organisation de la logique d'application à l'aide de can.Control

can.Control crée un contrôle avec état organisé, sans fuite de mémoire et pouvant être utilisé pour créer des widgets ou organiser la logique de l'application. Vous créez une instance d'un contrôle sur un élément DOM et lui transmettez les données dont votre contrôle aura besoin. Vous pouvez définir un nombre quelconque de fonctions dans votre contrôle et les lier à des événements..

Lorsque l'élément auquel votre contrôle est lié est supprimé du DOM, le contrôle se détruit lui-même et nettoie tous les gestionnaires d'événements liés..

Pour créer un nouveau contrôle, étendez can.Control () en lui transmettant un objet contenant les fonctions que vous souhaitez définir. Dans la deuxième partie, les gestionnaires d'événements seront également transmis..

Quelques variables et fonctions importantes sont présentes dans chaque instance de contrôle:

• ce - Une référence à l'instance de contrôle
• this.element - L'élément DOM sur lequel vous avez créé l'instance
• this.options - Un objet contenant toutes les données transmises à l'instance lors de sa création
• init () - Appelé lors de la création d'une instance

Gérer les contacts

Ajoutez l'extrait suivant à votre contacts.js fichier pour créer le contrôle qui gérera les contacts:

 Contacts = can.Control (init: function () this.element.html (can.view ("views / contactsList.ejs", contacts: this.options.contacts, catégories: this.options.categories)) ;)

Quand une instance de Contacts est créé, init () fera deux choses:

1. Les usages peut voir() rendre les contacts. peut voir() accepte deux paramètres: le fichier ou l'id de la balise de script contenant notre code de modèle et nos données. Il renvoie le résultat rendu sous la forme d'un documentFragment (un conteneur léger pouvant contenir des éléments DOM)..
2. Insère le documentFragment de peut voir() dans l'élément du contrôle en utilisant jQuery .html ().

Représenter des données à l'aide de modèles

Un modèle résume la couche de données d'une application. Deux modèles sont nécessaires dans cette application: un pour les contacts et un pour les catégories. Ajouter ce code à contacts.js:

 Contact = can.Model (findAll: 'GET / contacts', crée: "POST / contacts", met à jour: "PUT / contacts / id", détruit: "SUPPRIMER / contacts / id",  ) Category = can.Model (findAll: 'GET / categories', );

Un modèle dispose de cinq méthodes statiques que vous pouvez définir pour créer, récupérer, mettre à jour et supprimer des données. Elles sont Trouver tout, findOne, créer, mettre à jour et détruire. Vous pouvez écraser ces fonctions pour qu'elles fonctionnent avec n'importe quel back-end, mais le moyen le plus simple de définir un modèle consiste à utiliser le service REST, comme illustré dans le code ci-dessus. Vous pouvez omettre en toute sécurité les méthodes statiques qui ne seront pas utilisées dans une application..

Il est important de souligner ici que les instances de modèle dans CanJS sont en réalité ce que nous appelons des "observables".. peut.observer fournit le motif observable pour les objets et peut.observer.liste fournit le modèle observable pour les tableaux. Cela signifie que vous pouvez obtenir et définir des propriétés à l'aide de attr () et se lier aux changements dans ces propriétés.

le Trouver tout() méthode retourne un Model.list, qui est un peut.observer.liste qui déclenche des événements lorsqu'un élément est ajouté ou supprimé de la liste.

Simulation d'un service de repos à l'aide de fixations

Les appareils interceptent les requêtes AJAX et simulent leur réponse avec un fichier ou une fonction. C'est fantastique pour les tests, le prototypage ou lorsqu'un back-end n'est pas encore prêt. Des appareils sont nécessaires pour simuler le service REST utilisé par les modèles de cette application..

Mais d’abord, vous aurez besoin de quelques exemples de données à utiliser par les appareils. Ajoutez le code suivant à contacts.js:

 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", courriel: "[email protected]", téléphone: "0123456789", catégorie: "famille"]; var CATEGORIES = [id: 1, nom: 'Famille', données: 'famille', id: 2, nom: 'Amis', données: 'amis', id: 3, nom: 'Co- travailleurs ', données:' collègues '];

Maintenant que vous avez des données, vous devez les connecter aux appareils afin de pouvoir simuler un service REST.. can.fixture () prend deux paramètres. Le premier est l'URL que nous voulons intercepter et le second est un fichier ou une fonction utilisée pour générer une réponse. Les URL que vous souhaitez intercepter sont souvent dynamiques et suivent un modèle. Dans ce cas, vous devez utiliser des URL basées sur des modèles. Ajoutez simplement des accolades à l'URL où vous souhaitez faire correspondre les caractères génériques.

Ajouter ce qui suit à contacts.js:

 can.fixture ('GET / contacts', function () return [CONTACTS];); 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 [CATEGORIES];);

Les quatre premiers appareils simulent le OBTENIR, POSTER, METTRE et EFFACER réponses pour la Contact modèle, et le cinquième montage simule la OBTENIR réponse pour le Catégorie modèle.

Amorcer l'application

Votre application contient des modèles pour vos données, des vues pour afficher les contacts et un contrôle pour tout connecter. Maintenant, vous devez lancer l'application!

Ajoutez ceci à votre contacts.js fichier:

 $ (document) .ready (fonction () $ .when (Category.findAll (), Contact.findAll ())). then (fonction (categoryResponse, contactResponse) var catégories = categoryResponse [0], contacts = contactResponse [0 ]; nouveaux contacts ('# contacts', contacts: contacts, catégories: catégories);););

Regardons de plus près ce qui se passe dans ce code:

 $ (document) .ready (fonction () 

Attendez que le DOM soit prêt en utilisant la fonction de préparation de documents de jQuery.

 $ .when (Category.findAll (), Contact.findAll ()). then (fonction (categoryResponse, contactResponse) 

Appel Trouver tout() sur les deux modèles pour récupérer tous les contacts et les catégories. Puisque Trouver tout() renvoie un différé, $ .when () est utilisé pour faire les deux demandes en parallèle et exécuter un rappel quand elles sont terminées.

 var catégories = categoryResponse [0], contacts = contactResponse [0];

Obtenir la liste des instances de modèle à partir de la réponse des deux Trouver tout() appels. Les réponses sont des tableaux, le premier index étant la liste des instances de modèle extraites..

 nouveaux contacts ('# contacts', contacts: contacts, catégories: catégories);

Créer une instance de Contact Contrôle sur le #Contacts élément. La liste des contacts et des catégories est transmise au contrôle.

Lorsque vous exécutez votre application dans un navigateur, vous devriez voir une liste de contacts:

Emballer

Cela le fait pour la première partie de cette série! Vous avez été initié au coeur de CanJS:

• Des modèles résumer la couche de données dans votre application
• Des vues sont des modèles qui transforment les données en HTML
• Les contrôles câbler tout.

Dans la prochaine leçon, vous allez créer un Contrôle et Vue pour afficher les catégories et utiliser le routage pour filtrer les contacts. Espérons vous y voir!

Des questions? Demandez ci-dessous! Vous ne pouvez pas attendre pour en savoir plus? La deuxième partie de la série a été publiée ici!