Share
Dit is het laatste deel van een driedelige zelfstudie waarin je leert hoe je een applicatie voor contactbeheer in JavaScript bouwt, met behulp van CanJS en jQuery. Als je klaar bent met deze tutorial, heb je alles wat je nodig hebt om je eigen JavaScript-applicaties te bouwen met CanJS!
In deel twee hebt u de weergaven en bedieningselementen gemaakt die nodig zijn om categorieën weer te geven, gemaakte helpdesks voor Model.List, gebruikte routing om contacten te filteren en uw EJS te wijzigen om te profiteren van live binding.
In dit deel van de zelfstudie, zult u:
Accentsconagua
Contact ControleJe zult de bronbestanden van deel één en twee toevoegen, dus als je dat nog niet hebt gedaan, lees dan in op deel één en twee lezen.
In deel een, contactView.ejs geplaatst elke eigenschap van een contact bevindt zich in een invoertag. Als u een contact wilt bijwerken wanneer deze invoer verandert, moet u eventhandlers toevoegen aan de Contact Controle. Voeg deze code toe contacts.js binnen in de Contacten Controle:
'.contact input focusout': functie (el, ev) this.updateContact (el); , '. contact input keyup': functie (el, ev) if (ev.keyCode == 13) el.trigger ('vervagen'), '. contact selecteren wijzigen': functie (el, ev) this.updateContact (el), updateContact: function (el) var contact = el.closest ('. contact'). data ('contact'); contact.attr (el.attr ('naam'), el.val ()). save (); Laten we deze code regel voor regel doorlopen en zien hoe het werkt:
'.contact input focusout': functie (el, ev) this.updateContact (el); ,
gesprekken updateContact () wanneer dan ook verliest focus.
'.contact input keyup': functie (el, ev) if (ev.keyCode == 13) el.trigger ('vervagen') Triggers de vervagen evenement op een als de enter-toets wordt ingedrukt terwijl het focus heeft. Hierdoor zal de invoer de focus verliezen, die wordt afgehandeld door de focusOut gebeurtenishandler.
'.contact select change': functie (el, ev) this.updateContact (el),
gesprekken updateContact () wanneer de waarde van de veranderingen.
var contact = el.closest ('. contact'). data ('contact'); Vindt de dichtstbijzijnde bovenliggende tag en haalt de modelinstantie op met behulp van $ .Data ().
contact.attr (el.attr ('naam'), el.val ()). save (); Werkt het contact bij met attr (). De naam van elk komt overeen met een eigenschap van contact, dus el.attr ( 'name') retourneert de naam van de eigenschap die wordt bijgewerkt. opslaan() wordt gebruikt om de wijziging op te slaan in de Contact Model.
Er is een kleine link met een 'X' in de rechterbovenhoek van elk contact. Wanneer hierop wordt geklikt, moet het contact worden verwijderd. Hiertoe voegt u een andere gebeurtenishandler toe aan de Contacten besturing die er als volgt uitziet:
'.remove klik': functie (el, ev) el.closest ('. contact'). data ('contact'). destroy (); Wanneer de X wordt geklikt, de contactinstantie wordt opgehaald van de dichtstbijzijnde en vernietigen() wordt genoemd. vernietigen() verwijdert de contactpersoon uit het model en verwijdert deze uit alle Model.Lists.
Live binding werkt uw gebruikersinterface automatisch bij wanneer een contact wordt verwijderd.
Nu maakt u de controle en weergave die u nodig hebt om een contact te maken. Eerst heeft u een gigantische knop 'Nieuw contact' nodig. Voeg deze code toe aan U moet ook een nieuwe weergave maken waarmee een formulier wordt gegenereerd voor het maken van een contactpersoon. Sla deze code op als Met deze weergave wordt de Nu moet u een nieuwe naam met de naam Control maken Laten we deze controle in detail bekijken om te zien wat er aan de hand is: Creëert een leeg contact met behulp van Hiermee schuift u het formulier uit het zicht. gesprekken telefoontje gesprekken Vindt de Als de naam van het contact niet leeg is, Besturingselementen ondersteunen ook gemanipuleerde gebeurtenishandlers waarmee u een gebeurtenishandler kunt aanpassen en naar gebeurtenissen op andere objecten dan. Kunt luisteren U kunt het gedrag van de handler aanpassen met Besturingselementen kunnen ook aan andere objecten dan Deze handlers worden opgeruimd wanneer de instantie Control wordt vernietigd. Dit is van cruciaal belang om geheugenlekken te voorkomen die veel voorkomen in JavaScript-toepassingen. U moet een sjabloonbeheertool gebruiken om het formulier weer te geven wanneer op de knop Nieuw contact wordt geklikt. Voeg deze gebeurtenishandler toe aan de De knop "Nieuw contact" bevindt zich buiten de Net als de andere besturingselementen in uw toepassing, moet u een nieuw exemplaar van de Met deze wijziging wordt een instantie van de Wanneer een nieuw contact wordt gemaakt, wordt het Dit bindt aan de Live binding werkt de gebruikersinterface van uw toepassing automatisch bij wanneer de contactpersoon wordt toegevoegd Dat is alles voor het laatste deel van deze tutorial. In deel drie heb je: Dit is het einde van de CanJS contacts manager-zelfstudie. Hier is een samenvatting van wat er in deze driedelige tutorial aan bod kwam: Je hebt nu alles wat je nodig hebt om JavaScript-applicaties te bouwen met CanJS. Ga iets geweldigs bouwen. Ga naar CanJS voor volledige documentatie en meer voorbeeldtoepassingen. Bedankt voor het lezen!index.html rechtsboven Nieuw contact
createView.ejs in uw weergavemap:
contactView.ejs subsjabloon en voegt de knoppen "Opslaan" en "Annuleren" toe. Hier is hoe het eruit ziet in de applicatie: creëren die het formulier toont en de nieuwe contactpersoon opslaat Contact Model. Voeg deze code toe aan contacts.js: Create = can.Control (show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categories: this .options.categories)); this.element.slideDown (200);, hide: function () this.element.slideUp (200);, '.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);, '. klik opslaan': functie (el) this.createContact (el), '.cancel klik': function () this .hide ();, createContact: function () var form = this.element.find ('form'); values = can.deparam (form.serialize ()); if (values.name! == "" ) this.contact.attr (values) .save (); this.hide ();); show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categories: this.options.categories)); this.element.slideDown (200); , nieuw contact() en wijst het toe this.contact. Het nieuwe contact wordt doorgegeven aan kan zien() samen met de categorieën die moeten worden weergegeven. hide: function () this.element.slideUp (200); ,
'.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);
contact maken() als de Enter-toets wordt ingedrukt terwijl u in een van de ingangen bent. '.save klik': functie (el) this.createContact (el),
contact maken() wanneer op de knop "Opslaan" wordt geklikt. '.cancel klik': function () this.hide (); ,
verbergen() wanneer op de knop "Annuleren" wordt geklikt. var form = this.element.find ('vorm'); waarden = can.deparam (form.serialize ()); element en gebruikt jQuery's serialize () functie om een tekenreeks te krijgen die alle waarden van het formulier vertegenwoordigt. Vervolgens wordt de geserialiseerde tekenreeks geconverteerd naar een object met can.deparam (). if (values.name! == "") this.contact.attr (values) .save (); this.hide ();
attr () wordt gebruikt om het contact te updaten dat is opgeslagen in this.contact. opslaan() is geroepen om de wijzigingen in het model op te slaan en het formulier is verborgen door te bellen verbergen().
Templated Event Handlers gebruiken
this.element.NAAM in het geval van handler. De variabele binnen de accolades wordt opgezocht in de Controls this.options eerst en dan de venster. U kunt meerdere instanties van dezelfde controle maken, maar het gedrag van de gebeurtenishandlers in elk geval aanpassen.this.element het gebruik van gemanipuleerde event handlers. Als de variabele binnen NAAM is een object, Control zal zich verbinden met dat object om naar gebeurtenissen te luisteren. Het object hoeft geen DOM-element te zijn, het kan elk object zijn zoals een model. Om ergens op een pagina naar een klik te luisteren, gebruikt u: 'document klik'. als je gebeurtenishandler.
Het formulier tonen
creëren Controle in contacts.js: 'document # nieuw-contact klik': function () this.show ();
creëren Het element van de controle, dus 'document # nieuw contact' wordt gebruikt als de selector voor de knop. Wanneer erop wordt geklikt, zal het formulier naar beneden worden geschoven.
De creatiecontrole initialiseren
creëren Controle. Werk uw documentklare functie bij in contacts.js om er zo uit te zien: $ (document) .ready (function () $ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse) var categories = categoryResponse [0], contacts = contactResponse [0 ]; nieuw Maken ('# create', categorieën: categorieën); nieuwe Contacten ('# contacten', contacten: contacten, categorieën: categorieën); nieuw Filter ('# filter', contacten: contacten, categorieën : categorieën ); ); ) creëren Controle zal worden gemaakt op de #create element. Het wordt de lijst met categorieën doorgegeven.
Reageren op een nieuw contact
Model.List opgeslagen in de Contacten Controle moet worden bijgewerkt. U doet dit met behulp van sjabloon-event handlers. Voeg deze gebeurtenishandler toe aan de Contacten Controle in contacts.js: 'Contact created': function (list, ev, contact) this.options.contacts.push (contact);
aangemaakt evenement van de Contact Model. Het nieuwe contact wordt toegevoegd aan de Model.List opgeslagen in de Contacten Controle met behulp van Duwen().
this.options.contacts.Afsluiten
