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

Deze code maakt de contactView.ejs subsjabloon voor elk contact. can.view.render () neemt een sjabloon en gegevens als parameters en retourneert HTML.

Een enkel contact weergeven

Subsjablonen zijn een uitstekende manier om uw mening te ordenen in hanteerbare brokken. Ze helpen ook uw sjablonen te vereenvoudigen en bevorderen DRY (Do not Repeat Yourself). Later in deze tutorial, zul je deze sjabloon opnieuw gebruiken om contacten te creëren. Sla deze code op als contactView.ejs in uw weergavemap:

  
 
 
  
 
 >  <% $.each(categories, function(i, category) %> > <%= category.name %>  <% ) %>  
 
 Adres > Telefoon > E-mail > 
 
 

Elke eigenschap van een contact wordt geplaatst in een label. Deze worden gebruikt om de informatie van een contact toe te voegen en bij te werken.

Uw weergaven levend maken

Elke keer dat EJS tegenkomt attr () tijdens het verwerken van een sjabloon weet het dat de omringende code moet worden omgezet in een gebeurtenishandler die is gebonden aan de wijzigingen van die eigenschap. Wanneer de eigenschap elders in de app wordt gewijzigd, wordt de gebeurtenishandler geactiveerd en wordt uw gebruikersinterface bijgewerkt. Dit wordt live binding genoemd. EJS Live-binding is opt-in. Het wordt alleen ingeschakeld als u het gebruikt attr () om toegang te krijgen tot eigenschappen.

Laten we naar een van de kijken tags van de contactView.ejs om te zien hoe dit werkt:

 >

De code in de magische tags wordt een gebeurtenishandler die is gekoppeld aan de eigenschap name van de contactpersoon. Wanneer we de eigenschap name bijwerken, wordt de gebeurtenishandler uitgevoerd en wordt de HTML bijgewerkt.

Logica van toepassingen organiseren met can.Control

can.Control creëert een georganiseerde, geheugenlekvrije, stateful-controle die kan worden gebruikt om widgets te maken of applicatielogica te organiseren. U maakt een exemplaar van een besturingselement op een DOM-element en geeft de gegevens door die uw besturingselement nodig heeft. U kunt een willekeurig aantal functies in uw besturing definiëren en aan gebeurtenissen binden.

Wanneer het element waaraan uw besturingselement is gebonden, wordt verwijderd uit de DOM, vernietigt de besturing zichzelf en worden eventuele event-handlers opgeschoond.

Om een ​​nieuw besturingselement te maken, breidt u het uit can.Control () door het door te geven van een object dat functies bevat die u wilt definiëren. In deel twee zullen event handlers ook worden doorgegeven.

Er zijn enkele belangrijke variabelen en functies aanwezig in elke instantie van Control:

• deze - Een verwijzing naar de instantie Control
• this.element - Het DOM-element waarvoor u het exemplaar hebt gemaakt
• this.options - Een object met alle gegevens die zijn doorgegeven aan het exemplaar toen het werd gemaakt
• in het() - Wordt aangeroepen wanneer een exemplaar wordt gemaakt

Contacten beheren

Voeg het volgende fragment toe aan uw contacts.js bestand om het besturingselement te maken waarmee contacten worden beheerd:

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

Wanneer een instantie van Contacten is gecreëerd, in het() zal twee dingen doen:

1. Toepassingen kan zien() om contacten te maken. kan zien() accepteert twee parameters: het bestand of id van de scripttag met onze sjablooncode en gegevens. Het resultaat wordt teruggegeven als een documentFragment (een lichtgewicht container die DOM-elementen kan bevatten).
2. Voegt het documentFragment in kan zien() in het element van de controle met behulp van jQuery's .html ().

Gegevens vertegenwoordigen met behulp van modellen

Een model abstraheert de gegevenslaag van een toepassing. Er zijn twee modellen nodig in deze toepassing: één voor contacten en één voor categorieën. Voeg deze code toe aan contacts.js:

 Contact = can.Model (findAll: 'GET / contacts', create: "POST / contacts", update: "PUT / contacts / id", destroy: "DELETE / contacts / id",  ); Category = can.Model (findAll: 'GET / categories', );

Een model heeft vijf statische methoden die u kunt definiëren om gegevens te maken, op te halen, bij te werken en te verwijderen. Zij zijn vind alle, vind een, creëren, bijwerken en vernietigen. U kunt deze functies overschrijven om met elke back-end te werken, maar de eenvoudigste manier om een ​​model te definiëren, is het gebruik van de REST-service, zoals in de bovenstaande code wordt geïllustreerd. U kunt veilig alle statische methoden weglaten die niet in een toepassing worden gebruikt.

Het is belangrijk om hier te benadrukken dat de modelinstanties in CanJS feitelijk zijn wat we 'observeerbaar' noemen. can.Observe geeft het waarneembare patroon voor objecten en can.Observe.List biedt het waarneembare patroon voor arrays. Dit betekent dat u eigenschappen kunt verkrijgen en instellen met attr () en bind aan veranderingen in die eigenschappen.

De vind alle() methode geeft a terug Model.list, wat een is can.Observe.List die gebeurtenissen activeert wanneer een element wordt toegevoegd of verwijderd uit de lijst.

Een rustdienst simuleren met behulp van fixtures

Fixtures onderscheppen AJAX-aanvragen en simuleren hun reactie met een bestand of functie. Dit is fantastisch voor testen, prototypen of wanneer een back-end nog niet klaar is. Fixtures zijn nodig om de REST-service te simuleren die de modellen in deze applicatie gebruiken.

Maar eerst heb je een aantal voorbeeldgegevens nodig om de armaturen te gebruiken. Voeg de volgende code toe aan contacts.js:

 var CONTACTS = [id: 1, naam: 'William', adres: '1 CanJS Way', e-mail: '[email protected]', telefoon: '0123456789', categorie: 'co-workers', id : 2, naam: 'Laura', adres: '1 CanJS Way', e-mail: '[email protected]', telefoon: '0123456789', categorie: 'vrienden', id: 3, naam: 'Lee' , adres: '1 CanJS Way', e-mail: '[email protected]', telefoon: '0123456789', categorie: 'familie']; var CATEGORIES = [id: 1, naam: 'Familie', data: 'familie', id: 2, naam: 'Vrienden', data: 'vrienden', id: 3, naam: 'Co- werknemers ', gegevens:' collega's '];

Nu dat je wat gegevens hebt, moet je deze aansluiten op fixtures, zodat je een REST-service kunt simuleren. can.fixture () neemt twee parameters. De eerste is de URL die we willen onderscheppen en de tweede is een bestand of functie die wordt gebruikt om een ​​reactie te genereren. URL's die u wilt onderscheppen, zijn vaak dynamisch en volgen een patroon. In dit geval moet u sjabloon-URL's gebruiken. Voeg eenvoudig accolades toe aan de URL waarop u wildcards wilt matchen.

Voeg het volgende toe aan contacts.js:

 can.fixture ('GET / contacten', functie () 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];);

De eerste vier fixtures simuleren de KRIJGEN, POST, LEGGEN en DELETE antwoorden voor de Contact model, en de vijfde fixture simuleert de KRIJGEN antwoord voor de Categorie model-.

Bootstrappen van de applicatie

Uw toepassing heeft modellen voor uw gegevens, weergaven om contacten weer te geven en een besturingselement om alles aan te sluiten. Nu moet je de applicatie een kickstart geven!

Voeg dit toe aan uw contacts.js het dossier:

 $ (document) .ready (function () $ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse) var categories = categoryResponse [0], contacts = contactResponse [0 ]; nieuwe contacten ('# contacten', contactpersonen: contacten, categorieën: categorieën);););

Laten we eens nader bekijken wat er in deze code gebeurt:

 $ (Document) .ready (function () 

Wacht tot de DOM klaar is met de documentklare functie van jQuery.

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

telefoontje vind alle() op beide modellen om alle contactpersonen en categorieën op te halen. Sinds vind alle() geeft een uitgestelde terug, $ .Wanneer () wordt gebruikt om beide aanvragen parallel te maken en een terugbelopdracht uit te voeren wanneer ze zijn voltooid.

 var categories = categoryResponse [0], contacts = contactResponse [0];

Haal de lijst met modelinstances op uit de reactie van de twee vind alle() noemt. De antwoorden zijn arrays, waarbij de eerste index de lijst met gevonden modelinstances is.

 nieuwe contacten ('# contacten', contactpersonen: contacten, categorieën: categorieën);

Maak een instantie van de Contact Controle op de #contacten element. De lijst met contactpersonen en categorieën wordt doorgegeven aan de besturing.

Wanneer u uw toepassing in een browser uitvoert, ziet u een lijst met contactpersonen:

Afsluiten

Dat doet het voor deel een van deze serie! U bent kennismaken met de kern van CanJS:

• modellen abstract de gegevenslaag in uw applicatie
• Keer bekeken zijn sjablonen die gegevens omzetten in HTML
• controls sluit alles op.

In de volgende les maakt u een Controle en Uitzicht om categorieën weer te geven en routing te gebruiken om contactpersonen te filteren. Ik hoop je daar te zien!

Vragen? Vraag het hieronder weg! Kan niet wachten om meer te leren? Deel twee van de serie is hier geplaatst!