Share
Nella quarta parte di questa serie, abbiamo visto quanto è facile aggiungere e rimuovere modelli dalla nostra raccolta e mantenere la pagina aggiornata in sincronia con le modifiche. In questa parte, esamineremo la modifica dei dati del modello esistente.
Inizieremo aggiungendo un altro pulsante semplice al modello, che consentirà la modifica dei suoi dati:
Poiché stiamo aggiungendo questo pulsante al nostro modello esistente, possiamo anche aggiungere un modello completamente nuovo che può essere utilizzato per eseguire il rendering di un modulo modificabile in cui è possibile modificare i dati del modello. È molto simile al modello uscente e può essere aggiunto alla pagina dopo il modello esistente:
Il nuovo modello consiste principalmente di elementi che espongono i dati modificabili. Non è necessario preoccuparsi delle etichette per gli elementi, ma utilizzare i dati del modello come valori predefiniti di ciascun input. Si noti che stiamo utilizzando un campo modulo nascosto per archiviare il file genere attributo del modello, lo useremo per impostare il valore di a che dobbiamo aggiungere usando il nostro script invece di renderlo il modello.
Successivamente possiamo associare alcuni gestori di eventi per i nuovi pulsanti che abbiamo aggiunto; aggiorna il eventi oggetto nel ContactView classe in modo che contenga i seguenti nuovi collegamenti:
"click button.edit": "editContact", "change select.type": "addType", "click button.save": "saveEdits", "click button.cancel": "cancelEdit"
Non dimenticare di aggiungere la virgola finale alla fine del bind esistente! Questi sono molto simili alle associazioni che abbiamo usato prima; ogni chiave: coppia di valori specifica semplicemente un evento da ascoltare e un selettore che corrisponde all'elemento che attiva l'evento come chiave e il gestore di eventi da eseguire al rilevamento dell'evento come valore.
Nello stesso modo in cui abbiamo memorizzato un riferimento alla funzione template sotto la proprietà template della nostra classe ContactView, dovremmo anche memorizzare un riferimento alla funzione template che useremo per passare il contatto in modalità di modifica. Inserisci EditTemplate direttamente dopo la proprietà del modello:
Accentsconagua
editTemplate: _.template ($ ("# contactEditTemplate"). html ()), Ora possiamo aggiungere loro stessi i gestori di eventi, che dovrebbero anche entrare nel ContactView classe dopo l'esistente deleteContact () metodo. Innanzitutto, aggiungeremo il Modifica il contatto() metodo:
editContact: function () this. $ el.html (this.editTemplate (this.model.toJSON ())); var newOpt = $ ("", html:"Aggiungere nuova… ", valore:" addType "), this.select = directory.createSelect (). addClass (" tipo ") .val (questo. $ el.find (" # tipo "). val ()). append (newOpt ) .insertAfter (questo. $ el.find (". name")); this. $ el.find ("input [type = 'hidden']"). remove ();, Iniziamo rendendo il nostro nuovo EditTemplate che abbiamo aggiunto alla pagina usando Underscore modello() metodo nello stesso modo in cui abbiamo aggiunto ogni contatto utilizzando il modello di visualizzazione standard.
Per rendere più semplice la modifica del tipo di contatto, possiamo eseguire il rendering di una casella di selezione che consente all'utente di passare facilmente da un tipo esistente all'altro, ma vogliamo anche considerare la possibilità che l'utente desideri aggiungere un nuovo tipo. Per consentire ciò, creeremo un'opzione speciale per la casella di selezione con il testo Aggiungere nuova… e un valore di AddType.
Quindi creiamo il nuovo elemento usando il createSelect () metodo della nostra vista principale, che se richiami dall'ultima parte di questo tutorial restituirà a elemento contenente un per ogni tipo unico nella collezione. Diamo un nome di classe e per ottenere il elemento per mostrare il tipo esistente del contatto che si sta modificando, impostiamo il suo valore sul valore del nascosto abbiamo aggiunto nel nostro modello. Inseriamo quindi il nuovo dopo il per il nome del contatto. Il nuovo elemento select viene aggiunto come proprietà dell'istanza della vista in modo da poter interagire facilmente con esso.
Una volta aggiunto il elemento per il tipo di contatto, possiamo quindi rimuovere il campo nascosto in modo che non interferisca con il salvataggio della modifica, che esamineremo a breve.
A questo punto, ora dovremmo essere in grado di fare clic su modificare pulsante in uno dei nostri contatti e il contenuto di quel contatto convertito in un modulo:
Uno degli attacchi all'evento che abbiamo aggiunto era per il modificare evento della casella di selezione del tipo, quindi possiamo aggiungere un gestore che sostituisce il scatola con uno standard elemento:
if (this.select.val () === "addType") this.select.remove (); $ ("", " class ":" type "). insertAfter (this. $ el.find (". name ")). focus (); Quando il cambiamenti di valore dell'elemento, per prima cosa controlliamo se il suo valore è AddType e se è così, rimuoviamo l'elemento dalla pagina e ne creiamo uno nuovo elemento per sostituirlo. Quindi inseriamo il nuovo elemento usando jQuery InsertAfter () metodo e concentrarlo pronto per l'immissione di testo.
Successivamente possiamo aggiungere il gestore che prenderà le modifiche apportate nel modulo di modifica e aggiornerà i dati nel modello. Aggiungi il saveEdits () metodo direttamente dopo il Modifica il contatto() metodo che abbiamo appena aggiunto:
saveEdits: function (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 ( "class")] = el.val ();); if (formData.photo === "") delete formData.photo; this.model.set (formData); this.render (); if (prev.photo === "/img/placeholder.png") elimina prev.photo; _.each (contatti, funzione (contatto) if (_.isEqual (contact, prev)) contacts.splice (_. indexOf (contatti, contatto), 1, formData);); , Prima di tutto, creiamo un elemento vuoto per archiviare i dati che sono stati inseriti nel modulo e memorizziamo anche una copia del file previousAttributes del modello che appartiene alla vista con cui stiamo lavorando. Il previousAttributes la proprietà dei modelli è un archivio dati che Backbone mantiene per noi in modo da poter vedere facilmente quali erano i dati degli attributi precedenti di un attributo.
Quindi riceviamo ciascun elemento di input dal modulo utilizzando una combinazione di jQuery trova() metodo e il :ingresso filtro, che ci fornisce tutti i campi del modulo. Non vogliamo l'annullamento o il salvataggio elementi, quindi li rimuoviamo dalla selezione usando jQuery non() metodo.
Una volta che abbiamo la nostra collezione di campi, li iteriamo su di essi usando jQuery ogni() metodo e per ogni oggetto della collezione, aggiungiamo una nuova chiave al nostro formdata oggetto utilizzando la classe dell'oggetto corrente e un nuovo valore utilizzando il valore dell'articolo corrente.
Quando convertiamo il contatto modificabile in un contatto normale, non vogliamo perdere la foto predefinita se non è stata scelta una nuova foto. Per assicurarci di non perdere la foto predefinita, possiamo eliminare il file foto proprietà dal nostro formdata oggetto se il suo valore è vuoto.
I modelli Backbone hanno un metodo setter che può essere utilizzato per impostare qualsiasi attributo.
I modelli Backbone hanno un metodo setter che può essere utilizzato per impostare qualsiasi attributo. Per aggiornare i dati del modello, basta chiamarlo impostato() metodo che passa nel formdata oggetto che abbiamo preparato. Una volta fatto questo, chiamiamo la vista render () metodo e il nostro modello appena aggiornato verrà restituito alla pagina, con tutte le informazioni aggiornate dal modulo.
Come abbiamo fatto in precedenza, abbiamo bisogno di aggiornare i dati memorizzati nel nostro originale contatti array in modo che il filtraggio della vista non abbia perso le modifiche che abbiamo apportato. Lo facciamo in un modo molto simile come prima, controllando prima se il foto la proprietà ha il valore predefinito e la rimuove se è così, e quindi usa una combinazione di Underscore ogni() e isEqaul () metodi per trovare l'elemento nell'array contatti che è stato modificato. Questo è dove usiamo il previousAttributes che abbiamo salvato in precedenza; non possiamo più usare il modello corrente perché i suoi attributi sono stati appena aggiornati.
Usiamo il codice JavaScript nativo splice () funzione per aggiornare il contatti array. Come prima, otteniamo l'indice dell'elemento da aggiornare usando Underscore indice di() metodo come il primo argomento a splice () e impostare la funzione per aggiornare un singolo oggetto usando il secondo argomento. Questa volta forniamo il nostro formdata oggetto come il terzo argomento. quando splice () riceve tre (o più) argomenti, il terzo argomento sono i dati per sostituire i dati che sono stati appena rimossi.
Abbiamo un pulsante a sinistra per il quale dobbiamo aggiungere un gestore: il pulsante Annulla. Questo metodo sarà molto semplice e cambierà semplicemente il contatto in modalità non edit, utilizzando i dati originali del modello. Aggiungi questo metodo dopo il saveEdits () metodo:
cancelEdit: function () this.render (); ,
Questo è tutto ciò che dobbiamo fare! Abbiamo già un metodo che prende un modello e lo mostra come una vista sulla pagina, quindi chiamiamo semplicemente questo metodo e i dati del modello originale verranno utilizzati per ricreare il contatto originale. Questo è utile perché anche se qualcuno modifica i dati nei campi del modulo mentre il contatto è in modalità di modifica, quando si fa clic sul pulsante Annulla, queste modifiche andranno perse.
In questa parte del tutorial abbiamo visto come possiamo aggiornare i dati di un modello esistente piuttosto che creare un modello completamente nuovo. Per fare questo, in pratica, abbiamo solo bisogno di chiamare un modello impostato() metodo e passare i nuovi attributi che desideriamo impostare.
Come con Backbone, tuttavia, abbiamo coperto solo una piccola parte di ciò che queste librerie forniscono, c'è così tanto che possiamo usare quando costruisci applicazioni complesse sul front-end.
Come abbiamo visto, dobbiamo anche pensare a come possiamo cambiare la vista per consentire al visitatore di inserire i dati che verranno impostati come nuovi attributi. In questo esempio, abbiamo raggiunto questo risultato creando un altro modello per gestire il rendering di un modulo precompilato con i dati dell'attributo esistente che l'utente può sovrascrivere per cambiare.
Nel corso di questa serie, abbiamo esaminato tutti i principali componenti di Backbone inclusi modelli, raccolte, viste e router ed eventi. Abbiamo anche esaminato alcuni dei metodi e proprietà forniti da Backbone che possiamo usare per interagire con i diversi costrutti per produrre un'applicazione integrata e funzionante, anche se di base.
Oltre ad apprendere alcune basi di Backbone, uno degli aspetti più importanti del tutorial è stato il modo in cui l'applicazione è strutturata, con tutto il nostro codice organizzato in modo logico e coerente. Le applicazioni scritte in questo stile possono essere molto più facili da restituire e mantenere a lungo termine. Gran parte della nostra funzionalità era guidata dagli eventi, in risposta alle azioni del visitatore sotto forma di gestori di eventi UI, ma alcuni erano anche guidati da modifiche alla raccolta e attivati manualmente nel punto appropriato nel nostro codice.
.
