Share
In deel vier van deze serie hebben we gezien hoe gemakkelijk het is om modellen uit onze verzameling toe te voegen en te verwijderen en de pagina gesynchroniseerd met de wijzigingen bij te houden. In dit deel gaan we kijken naar het bewerken van bestaande modelgegevens.
We beginnen met het toevoegen van een andere eenvoudige knop aan de sjabloon, die het bewerken van de gegevens mogelijk maakt:
Terwijl we deze knop aan onze bestaande sjabloon toevoegen, kunnen we ook een geheel nieuwe sjabloon toevoegen die kan worden gebruikt om een bewerkbare vorm weer te geven waarin de modelgegevens kunnen worden gewijzigd. Het lijkt sterk op de exiting-sjabloon en kan na de bestaande sjabloon aan de pagina worden toegevoegd:
De nieuwe sjabloon bestaat voornamelijk uit elementen die de bewerkbare gegevens blootleggen. We hoeven ons geen zorgen te maken over labels voor de elementen, maar gebruiken in plaats daarvan de gegevens uit het model als de standaardwaarden van elke invoer. Merk op dat we een verborgen formulierveld gebruiken om de type attribuut van het model, gebruiken we dit om de waarde van a in te stellen die we moeten toevoegen met behulp van ons script in plaats van dat de sjabloon het rendert.
Vervolgens kunnen we een aantal gebeurtenishandlers binden voor de nieuwe knoppen die we hebben toegevoegd; werk het events object in de ContactView klasse, zodat deze de volgende nieuwe bindingen bevat:
"click button.edit": "editContact", "change select.type": "addType", "click button.save": "saveEdits", "click button.cancel": "cancelEdit"
Vergeet niet om de achterliggende komma toe te voegen aan het einde van de bestaande binding! Deze lijken erg op de bindingen die we eerder hebben gebruikt; elke sleutel: waardepaar specificeert eenvoudig een gebeurtenis om naar te luisteren en een selector om het element dat de gebeurtenis als de sleutel activeert, en de gebeurtenishandler die bij detectie van de gebeurtenis als de waarde wordt uitgevoerd, overeen te laten komen.
Zoals we een verwijzing naar de sjabloonfunctie onder de sjablooneigenschap van onze klasse ContactView hebben opgeslagen, moeten we ook een verwijzing opslaan naar de sjabloonfunctie die we gebruiken om het contact in de bewerkingsmodus te schakelen. Toevoegen editTemplate direct na de template-eigenschap:
Accentsconagua
editTemplate: _.template ($ ("# contactEditTemplate"). html ()), Nu kunnen we de gebeurtenishandlers zelf toevoegen, die ook in de ContactView klasse na het bestaande Verwijder contact() methode. Eerst voegen we de bewerk contact() methode:
editContact: function () this. $ el.html (this.editTemplate (this.model.toJSON ())); var newOpt = $ ("", html:"Voeg nieuwe ... toe ", waarde:" addType "), this.select = directory.createSelect (). addClass (" type ") .val (dit. $ el.find (" # type "). val ()). toevoegen (newOpt ) .insertAfter (this. $ el.find (". name")); this. $ el.find ("input [type = 'hidden']"). remove ();, We beginnen met het weergeven van ons nieuwe editTemplate die we aan de pagina hebben toegevoegd met behulp van Underscore's sjabloon() methode op dezelfde manier waarop we elk contact hebben toegevoegd met behulp van de standaard weergavesjabloon.
Om het bewerken van het type contact gemakkelijker te maken, kunnen we een selectiekader weergeven waarmee de gebruiker gemakkelijk tussen bestaande typen kan schakelen, maar we willen ook rekening houden met de mogelijkheid dat de gebruiker een nieuw type wil toevoegen. Om dit mogelijk te maken, maken we een speciale optie voor het selectievak met de tekst Voeg nieuwe ... toe en een waarde van AddType.
We maken vervolgens het nieuwe element met behulp van de createSelect () methode van onze hoofdweergave, die als u zich herinnert van het laatste deel in deze tutorial een a terugzendt element dat een bevat voor elk uniek type in de verzameling. We geven het een klassenaam en de element om het bestaande type contact te tonen dat wordt bewerkt, stellen we de waarde ervan in op de waarde van het verborgene we hebben toegevoegd in onze sjabloon. Vervolgens voegen we de nieuwe in na de voor de naam van het contact. Het nieuwe selectie-element wordt toegevoegd als een eigenschap van de view-instantie, zodat we er gemakkelijk mee kunnen werken.
Zodra we het hebben toegevoegd element voor het type contact, kunnen we het verborgen veld verwijderen zodat het de bewerking niet belemmert, waar we binnenkort naar zullen kijken.
Op dit punt zouden we nu moeten kunnen klikken op de Bewerk knop in een van onze contactpersonen en de inhoud van dat contact omgezet in een formulier:
Een van de eventbindingen die we hebben toegevoegd was voor de verandering gebeurtenis van het type selectievakje, dus we kunnen een handler toevoegen die de doos met een standaard element:
if (this.select.val () === "addType") this.select.remove (); $ ("", " class ":" type "). insertAfter (this. $ el.find (". name ")). focus (); Wanneer de element waardewijzigingen controleren we eerst of de waarde ervan is AddType en als dat zo is, verwijderen we het element van de pagina en maken een nieuw element om het te vervangen. Vervolgens voegen we het nieuwe element in met behulp van jQuery's InsertAfter () methode en focus het klaar voor tekstinvoer.
Vervolgens kunnen we de handler toevoegen die de wijzigingen in het bewerkingsformulier doorvoert en de gegevens in het model bijwerkt. Voeg de toe saveEdits () methode direct na de bewerk contact() methode die we zojuist hebben toegevoegd:
saveEdits: functie (e) e.preventDefault (); var formData = , prev = this.model.previousAttributes (); $ (e.target) .closest ("form"). find (": input"). add (". photo"). each (function () var el = $ (this); formData [el.attr ( "klasse")] = el.val ();); if (formData.photo === "") delete formData.photo; this.model.set (formData); this.render (); if (prev.photo === "/img/placeholder.png") delete vorige foto; _.each (contacten, functie (contact) if (_.isEqual (contact, vorige)) contacts.splice (_. indexOf (contacten, contactpersoon), 1, formData);); , Allereerst maken we een leeg element om de gegevens op te slaan die in het formulier zijn ingevoerd en om ook een kopie van de gegevens op te slaan previousAttributes van het model dat hoort bij de weergave waarmee we werken. De previousAttributes eigenschap van modellen is een gegevensopslag die Backbone voor ons onderhoudt, zodat we eenvoudig kunnen zien wat de vorige attribuutgegevens van een kenmerk waren..
Vervolgens krijgen we elk invoerelement uit het formulier met een combinatie van jQuery's vind() methode en de :invoer filter, die ons alle formuliervelden geeft. We willen niet annuleren of opslaan elementen, dus we verwijderen ze uit de selectie met behulp van jQuery's niet() methode.
Zodra we onze verzameling velden hebben, herhalen we deze met behulp van jQuery's elk() methode en voor elk item in de verzameling voegen we een nieuwe sleutel toe aan onze formdata object met de klasse van het huidige item en een nieuwe waarde met de waarde van het huidige item.
Wanneer we de bewerkbare contactpersoon terugzetten in een normaal contact, willen we de standaardfoto niet kwijtraken als er geen nieuwe foto is gekozen. Om ervoor te zorgen dat we de standaardfoto niet kwijtraken, kunnen we de foto eigendom van onze formdata object als de waarde ervan leeg is.
Backbone-modellen hebben een setter-methode die kan worden gebruikt om elk attribuut in te stellen.
Backbone-modellen hebben een setter-methode die kan worden gebruikt om elk attribuut in te stellen. Om de gegevens van het model te updaten, noemen we het gewoon zijn set () methode passeren in de formdata object dat we hebben voorbereid. Zodra dit is gebeurd, noemen we de view's render () methode en ons nieuw bijgewerkte model worden teruggegeven aan de pagina, met alle bijgewerkte informatie van het formulier.
Zoals we eerder hebben gedaan, moeten we de gegevens die in ons origineel zijn opgeslagen updaten contacten array zodat het filteren van de weergave geen wijzigingen heeft verloren die we hebben gemaakt. We doen dit op een vergelijkbare manier als eerst, eerst controleren of het foto eigenschap heeft de standaardwaarde en verwijdert deze als dat zo is, en gebruikt vervolgens een combinatie van onderstrepingstekens elk() en isEqaul () methoden om het item in de matrix met contactpersonen te vinden dat is gewijzigd. Dit is waar we de gebruiken previousAttributes die we eerder hebben opgeslagen; we kunnen het huidige model niet meer gebruiken omdat de kenmerken zojuist zijn bijgewerkt.
We gebruiken de native JavaScript's splice () functie om de contacten matrix. Net als voorheen verkrijgen we de index van het item om bij te werken met behulp van Underscore's index van() methode als het eerste argument voor splice () en stel de functie in om een enkel item bij te werken met behulp van het tweede argument. Deze keer leveren we onze formdata object als het derde argument. Wanneer splice () ontvangt drie (of meer) argumenten, het derde argument zijn de gegevens om de gegevens te vervangen die zojuist zijn verwijderd.
We hebben nog een knop die we moeten toevoegen om een handler toe te voegen: de knop Annuleren. Deze methode zal heel eenvoudig zijn en zal het contact gewoon terugschakelen naar de niet-bewerkingsmodus, met behulp van de originele gegevens van het model. Voeg deze methode toe na de saveEdits () methode:
cancelEdit: function () this.render (); ,
Dat is alles wat we moeten doen! We hebben al een methode die een model gebruikt en deze als een weergave op de pagina weergeeft, dus we noemen deze methode gewoon en de originele modelgegevens worden gebruikt om de oorspronkelijke contactpersoon opnieuw te maken. Dit is handig, want zelfs als iemand de gegevens in de formuliervelden wijzigt terwijl de contactpersoon in de bewerkingsmodus is en als op de knop Annuleren wordt geklikt, gaan deze wijzigingen verloren.
In dit deel van de zelfstudie hebben we gekeken hoe we de gegevens van een bestaand model kunnen bijwerken in plaats van een geheel nieuw model te maken. Om dit te doen, moeten we in feite gewoon een model bellen set () methode en geef de nieuwe kenmerken door die we willen instellen.
Net als met Backbone hebben we echter maar een klein deel van wat deze bibliotheken bieden, er is zoveel meer dat we kunnen gebruiken bij het bouwen van complexe applicaties aan de voorkant.
Zoals we echter hebben gezien, moeten we ook nadenken over hoe we de weergave kunnen wijzigen zodat de bezoeker de gegevens kan invoeren die als de nieuwe kenmerken worden ingesteld. In dit voorbeeld hebben we dit bereikt door een nieuwe sjabloon te maken voor het verwerken van een formulier dat vooraf is gevuld met de bestaande kenmerkgegevens die de gebruiker kan overschrijven om te wijzigen.
In de loop van deze reeks hebben we gekeken naar alle belangrijke componenten van Backbone, waaronder modellen, collecties, weergaven en routers en evenementen. We hebben ook gekeken naar enkele van de methoden en eigenschappen van Backbone die we kunnen gebruiken om te communiceren met de verschillende constructies om een geïntegreerde, werkende applicatie te produceren, zij het een basale..
Naast het leren van enkele basisbegrippen van Backbone, was een van de belangrijkste aspecten van de tutorial hoe de applicatie is gestructureerd, waarbij al onze code op een logische en consistente manier is georganiseerd. Toepassingen die in deze stijl zijn geschreven, kunnen op de lange termijn veel gemakkelijker worden teruggezet en onderhouden. Veel van onze functionaliteit was door gebeurtenissen aangedreven, hetzij in reactie op de acties van de bezoeker in de vorm van UI-gebeurtenishandlers, maar sommige werden ook aangestuurd door wijzigingen in de verzameling en handmatig geactiveerd op het juiste punt in onze code.
.
