Share
En la parte cuatro de esta serie, vimos lo fácil que es agregar y eliminar modelos de nuestra colección y mantener la página actualizada en sincronización con los cambios. En esta parte, veremos cómo editar datos de modelos existentes..
Comenzaremos agregando otro botón simple a la plantilla, que permitirá la edición de sus datos:
Como estamos agregando este botón a nuestra plantilla existente, también podemos agregar una plantilla completamente nueva que se puede usar para representar una forma editable en la que se pueden cambiar los datos del modelo. Es muy similar a la plantilla que sale y se puede agregar a la página después de la plantilla existente:
La nueva plantilla consiste principalmente de Elementos que exponen los datos editables. No tenemos que preocuparnos por las etiquetas de los elementos, sino que utilizamos los datos del modelo como valores predeterminados de cada entrada. Tenga en cuenta que estamos utilizando un campo de formulario oculto para almacenar el tipo atributo del modelo, utilizaremos esto para establecer el valor de un que necesitamos agregar usando nuestro script en lugar de tener la plantilla renderizada.
A continuación, podemos vincular algunos controladores de eventos para los nuevos botones que hemos agregado; actualizar el eventos objeto en el ContactView clase para que contenga los siguientes nuevos enlaces:
"click button.edit": "editContact", "change select.type": "addType", "click button.save": "saveEdits", "click button.cancel": "cancelEdit"
¡No olvide agregar la coma al final del enlace existente! Estos son muy similares a los enlaces que hemos usado antes; cada par clave: valor simplemente especifica un evento para escuchar y un selector para que coincida con el elemento que activa el evento como la clave, y el controlador del evento para ejecutarse en la detección del evento como valor.
De la misma manera que almacenamos una referencia a la función de plantilla en la propiedad de plantilla de nuestra clase ContactView, también debemos almacenar una referencia a la función de plantilla que usaremos para cambiar el contacto al modo de edición. Añadir editTemplate directamente después de la propiedad de la plantilla:
Accentsconagua
editTemplate: _.template ($ ("# contactEditTemplate"). html ()), Ahora podemos agregar los controladores de eventos, que también deben ir a la ContactView clase después de la existente borrar contacto() método. Primero, agregaremos el editar contacto() método:
editContact: function () this. $ el.html (this.editTemplate (this.model.toJSON ())); var newOpt = $ ("", html:"Añadir nuevo ... ", valor:" addType "), this.select = directory.createSelect (). addClass (" type ") .val (this. $ el.find (" # type "). val ()). append (newOpt ) .insertAfter (this. $ el.find (". name")); this. $ el.find ("input [type = 'hidden']"). remove ();, Comenzamos por mostrar nuestra nueva editTemplate que agregamos a la página usando Underscore's modelo() Método de la misma manera que agregamos cada contacto usando la plantilla de visualización estándar.
Para facilitar la edición del tipo de contacto, podemos mostrar un cuadro de selección que permite al usuario cambiar fácilmente entre los tipos existentes, pero también queremos atender la posibilidad de que el usuario quiera agregar un nuevo tipo. Para permitir esto, crearemos una opción especial para el cuadro de selección con el texto Añadir nuevo ... y un valor de addType.
Entonces creamos el nuevo elemento usando el createSelect () método de nuestra vista maestra, que si recuerda de la última parte de este tutorial devolverá un elemento que contiene un para cada tipo único en la colección. Le damos un nombre de clase, y para obtener el elemento para mostrar el tipo existente del contacto que se está editando establecemos su valor en el valor del oculto Añadimos en nuestra plantilla. Luego insertamos el nuevo después de la por el nombre del contacto. El nuevo elemento de selección se agrega como una propiedad de la instancia de vista para que podamos interactuar con él fácilmente.
Una vez que hemos añadido el Para el tipo de contacto, podemos eliminar el campo oculto para que no interfiera con el guardado de la edición, que veremos en breve..
En este punto, ahora deberíamos poder hacer clic en el editar Botón en cualquiera de nuestros contactos y convertir el contenido de ese contacto en un formulario:
Uno de los enlaces de eventos que agregamos fue para el cambio evento del cuadro de selección de tipo, por lo que podemos agregar un controlador que reemplaza el caja con un estándar elemento:
if (this.select.val () === "addType") this.select.remove (); PS", " class ":" type "). insertAfter (this. $ el.find (". name ")). focus (); Cuando el Cambios de valor del elemento primero verificamos si su valor es addType Y si es así, eliminamos el elemento de la página y creamos un nuevo Elemento para reemplazarlo. Luego insertamos el nuevo elemento usando jQuery's. insertAfter () Método y enfoque listo para la entrada de texto.
A continuación, podemos agregar el controlador que tomará los cambios realizados en el formulario de edición y actualizará los datos en el modelo. Añade el guardar ediciones () método directamente después de la editar contacto() Método que acabamos de añadir:
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 ( "clase")] = el.val ();); if (formData.photo === "") eliminar formData.photo; this.model.set (formData); this.render (); if (prev.photo === "/img/placeholder.png") eliminar prev.photo; _.each (contactos, función (contacto) si (_.isEqual (contacto, anterior)) contacts.splice (_. indexOf (contactos, contacto), 1, formData);); , En primer lugar, creamos un elemento vacío para almacenar los datos que se han ingresado en el formulario y también almacenamos una copia del anteriorAtributos del modelo que pertenece a la vista con la que estamos trabajando. los anteriorAtributos La propiedad de los modelos es un almacén de datos que Backbone nos mantiene para que podamos ver fácilmente los datos de atributos anteriores de un atributo..
Luego obtenemos cada elemento de entrada del formulario utilizando una combinación de jQuery's encontrar() método y el :entrada Filtro, que nos da todos los campos del formulario. No queremos cancelar ni guardar. elementos, sin embargo, por lo que los eliminamos de la selección utilizando jQuery no() método.
Una vez que tenemos nuestra colección de campos, iteramos sobre ellos usando jQuery's cada() y para cada elemento de la colección, agregamos una nueva clave a nuestro formData objeto que utiliza la clase del elemento actual y un nuevo valor que utiliza el valor del elemento actual.
Cuando convertimos el contacto editable nuevamente en un contacto normal, no queremos perder la foto predeterminada si no se ha elegido una nueva foto. Para asegurarnos de no perder la foto predeterminada, podemos eliminar la foto propiedad de nuestro formData objeto si su valor está en blanco.
Los modelos de red troncal tienen un método de establecimiento que se puede usar para establecer cualquier atributo.
Los modelos de red troncal tienen un método de establecimiento que se puede usar para establecer cualquier atributo. Para actualizar los datos del modelo llamamos a su conjunto() método que pasa en el formData Objeto que hemos preparado. Una vez hecho esto llamamos a la vista hacer() El método y nuestro nuevo modelo actualizado se volverán a mostrar en la página, con cualquier información actualizada del formulario..
Como hemos hecho anteriormente, necesitamos actualizar los datos almacenados en nuestro original. contactos matriz para que al filtrar la vista no se pierdan los cambios que hemos realizado. Hacemos esto de una manera muy similar a la anterior, primero verificando si el foto la propiedad tiene el valor predeterminado y, si es así, eliminarlo, y luego usar una combinación de cada() y isEqaul () métodos para encontrar el elemento en la matriz de contactos que ha cambiado. Aquí es donde usamos el anteriorAtributos que salvamos antes; Ya no podemos usar el modelo actual porque sus atributos se acaban de actualizar..
Utilizamos los JavaScript nativos. empalme() función para actualizar el contactos formación. Como antes, obtenemos el índice del ítem a actualizar usando el guión bajo. índice de() El método como primer argumento para empalme() y configura la función para actualizar un solo elemento utilizando el segundo argumento. Esta vez suministramos nuestros formData Objeto como el tercer argumento. Cuando empalme() recibe tres (o más) argumentos, el tercer argumento son los datos para reemplazar los datos que se acaban de eliminar.
Nos queda un botón que necesitamos para agregar un controlador: el botón Cancelar. Este método será muy simple y solo cambiará el contacto nuevamente al modo de no edición, usando los datos originales del modelo. Agregue este método después de guardar ediciones () método:
cancelEdit: function () this.render (); ,
¡Eso es todo lo que necesitamos hacer! Ya tenemos un método que toma un modelo y lo presenta como una vista en la página, por lo que simplemente llamamos a este método y los datos del modelo original se utilizarán para recrear el contacto original. Esto es útil porque incluso si alguien cambia los datos en los campos del formulario mientras el contacto está en modo de edición, cuando se hace clic en el botón de cancelar, estos cambios se perderán..
En esta parte del tutorial hemos analizado cómo podemos actualizar los datos de un modelo existente en lugar de crear un modelo completamente nuevo. Para hacer esto, básicamente solo necesitamos llamar a un modelo conjunto() Método y pasar en los nuevos atributos que deseamos establecer..
Sin embargo, al igual que con Backbone, solo hemos cubierto una pequeña fracción de lo que ofrecen estas bibliotecas, hay mucho más que podemos usar al crear aplicaciones complejas en el front-end.
Sin embargo, como vimos, también debemos pensar en cómo podemos cambiar la vista para permitir que el visitante ingrese los datos que se configurarán como los nuevos atributos. En este ejemplo, lo logramos al crear otra plantilla para manejar la representación de un formulario pre-llenado con los datos de atributos existentes que el usuario puede sobrescribir para cambiar.
A lo largo de esta serie, hemos analizado todos los componentes principales de Backbone, incluidos los modelos, colecciones, vistas, enrutadores y eventos. También hemos analizado algunos de los métodos y propiedades proporcionados por Backbone que podemos utilizar para interactuar con las diferentes construcciones para producir una aplicación integrada y funcional, aunque sea una básica..
Además de aprender algunos conceptos básicos de Backbone, uno de los aspectos más importantes del tutorial fue cómo está estructurada la aplicación, con todo nuestro código organizado de forma lógica y coherente. Las aplicaciones escritas en este estilo pueden ser mucho más fáciles de regresar y mantener a largo plazo. Gran parte de nuestra funcionalidad fue impulsada por eventos, ya sea en respuesta a las acciones del visitante en forma de controladores de eventos de UI, pero algunos también fueron impulsados por cambios en la colección y se activaron manualmente en el punto apropiado de nuestro código..
.
