Share
Bienvenido a la tercera parte de nuestra serie que se centra en la creación de aplicaciones utilizando Backbone. Si no ha leído las partes uno y dos, le recomiendo que lo haga, solo para que sepa dónde estamos y qué hemos cubierto hasta ahora..
En la primera parte, tomamos un aspecto básico y modelos, vistas y colecciones. En la segunda parte, analizamos los enrutadores, los eventos y los módulos de historial. En esta parte, analizaremos las interacciones y veremos cómo podemos agregar o eliminar modelos de una colección..
Si vuelve a concentrarse en la primera parte, recordará cómo agregamos todos nuestros modelos a la colección cuando se inició la colección. Pero, ¿cómo podemos agregar modelos individuales a una colección después de que la colección ya se haya inicializado? En realidad es muy fácil..
Agregaremos la posibilidad de agregar nuevos contactos, lo que implicará una actualización del HTML subyacente y nuestra vista principal. Primero, el HTML; agregue el siguiente marcado al contenedor de contactos:
Este sencillo formulario permitirá a los usuarios agregar un nuevo contacto. El punto principal es que el carné de identidad atributiva de la Los elementos coinciden con los nombres de atributos utilizados por nuestros modelos, lo que facilita la obtención de los datos en el formato que deseamos..
A continuación, podemos agregar un controlador de eventos a nuestra vista maestra para que se puedan recopilar los datos en el formulario; agregue el siguiente código después de la clave existente: par de valores en el eventos objeto:
"haga clic en #add": "addContact"
¡No olvide agregar la coma al final del enlace existente! Esta vez especificamos el hacer clic evento desencadenado por el elemento con una carné de identidad de añadir, cual es el botón en nuestro formulario El manejador que estamos vinculando a este evento es agregar contacto, que podemos añadir a continuación. Agregue el siguiente código después de filterByType () método de la segunda parte:
Accentsconagua
addContact: function (e) e.preventDefault (); var newModel = ; $ ("# addContact"). children ("input"). each (function (i, el) if ($ (el) .val ()! == "") newModel [el.id] = $ ( el) .val ();); contacts.push (formData); if (_.indexOf (this.getTypes (), formData.type) === -1) this.collection.add (nuevo contacto (formData)); este. $ el.find ("# filter"). find ("select"). remove (). end (). append (this.createSelect ()); else this.collection.add (nuevo contacto (formData)); Como se trata de un controlador de eventos, recibirá automáticamente el evento objeto, que podemos utilizar para evitar el comportamiento predeterminado de la elemento cuando se hace clic (lo que sería enviar el formulario y volver a cargar la página, no lo que queremos). Luego creamos un nuevo objeto vacío, y usamos jQuery's cada() método para iterar sobre cada elemento en nuestro agregar contacto formar.
En la función de devolución de llamada suministrada a cada(), Primero verificamos que el campo haya tenido texto ingresado y si es así, agregamos una nueva propiedad al objeto con una clave igual a la carné de identidad del elemento actual, y un valor igual a su actual valor. Si el campo está vacío, la propiedad no se establecerá y el nuevo modelo heredará los valores predeterminados que se hayan especificado.
A continuación, podemos actualizar nuestro almacén de datos local con el nuevo contacto. Aquí es donde probablemente guardaríamos los nuevos datos en el servidor, si tuviéramos un servidor instalado para recibir dichas solicitudes. En este momento no lo hacemos, así que solo actualizaremos la matriz original por ahora, de modo que si se filtra la vista, no se pierdan los nuevos datos. Todo lo que necesitamos hacer es usar la colección. añadir() Método para agregar los nuevos datos a la colección. Podemos crear el nuevo modelo para pasar a la colección dentro de la llamada a añadir().
Por último, necesitamos actualizar el elemento para que si el nuevo contacto tiene un tipo diferente, ese tipo está disponible para el filtrado. Sin embargo, solo queremos volver a renderizar el si se ha añadido un nuevo tipo. Podemos usar los guiones bajos. índice de() Método para buscar a través de una matriz para un valor particular. Como el JavaScript nativo índice de() Método para cadenas, este método devolverá -1 si el valor no se encuentra. Pasamos la matriz para buscar como primer argumento a índice de(), y el valor a buscar como segundo.
Si no se encuentra el valor, el tipo especificado debe ser nuevo para que encontremos el cuadro de selección existente y lo eliminemos antes de agregar uno nuevo generado por nuestro createSelect () método. Si se encuentra el tipo, solo podemos agregar el nuevo modelo sin necesidad de volver a renderizar la selección.
Ahora que hemos agregado un nuevo modelo a la colección, debemos representarlo en la página. Para hacer esto podemos vincular otro manejador, esta vez para escuchar el añadir evento. Agregue la siguiente línea de código a la inicializar() Método de la colección:
this.collection.on ("add", this.renderContact, this); Usamos el en() Método una vez más para adjuntar el detector de eventos y como ya tenemos un método que crea y muestra vistas individuales, solo especificamos esa función como el controlador. También establecemos la vista maestra como el objeto de este dentro del controlador como hicimos con los controladores anteriores. En este punto, ahora deberíamos poder completar el formulario y hacer que el nuevo contacto se represente en la página:
Una cosa a tener en cuenta es que si el agregar contacto los campos de formulario se dejan completamente en blanco, el modelo resultante carecerá casi por completo de atributos, lo que causará problemas cuando intentemos manipular el modelo más adelante. Una forma de evitar esto es proporcionar valores predeterminados para la mayoría de los atributos del modelo, al igual que proporcionamos el valor predeterminado foto atributo. Si no hay valores predeterminados que podamos usar, como por ejemplo el nombre de un contacto, podemos proporcionar una cadena vacía. Actualizar el por defecto objeto en el Contacto clase para incluir valores predeterminados para nuestros otros atributos:
nombre: "", dirección: "", teléfono: "", correo electrónico: "", escriba: ""
Ahora que sabemos cómo agregar modelos a la colección, también debemos analizar cómo se pueden eliminar. Una forma en que podríamos habilitar la eliminación de modelos individuales es mediante la adición de un botón de eliminar a cada contacto, por lo que esto es lo que haremos; Primero debemos actualizar la plantilla para cada vista individual para que contenga un botón de eliminación. Agrega un nuevo botón al final de la plantilla:
Eso es todo lo que necesitaremos para este ejemplo. La lógica para eliminar un modelo individual se puede agregar a la clase de vista que representa un contacto individual, ya que la instancia de vista se asociará con una instancia de modelo en particular. Necesitaremos agregar un enlace de evento y un controlador de eventos para eliminar el modelo cuando se haga clic en el botón; agrega el siguiente código al final de la ContactView clase:
eventos: "haga clic en button.delete": "deleteContact", deleteContact: function () var removedType = this.model.get ("type"). toLowerCase (); this.model.destroy (); this.remove (); if (_.indexOf (directory.getTypes (), removeType) === -1) directory. $ el.find ("# filter select"). children ("[value = '" + removedType + "']" ).retirar(); Usamos el eventos Objeto para especificar nuestro enlace de evento, como lo hicimos antes con nuestra vista maestra. Esta vez estamos escuchando hacer clic eventos desencadenados por un que tiene el nombre de la clase borrar. El manejador vinculado a este evento es. borrar contacto, que añadimos después de la eventos objeto.
Primero almacenamos el tipo de contacto que acabamos de eliminar. Debemos hacer que este valor sea minúsculo como lo hicimos antes para asegurarnos de que no haya problemas de casos cuando el visor de contactos esté en uso.
Entonces llamamos al destruir() método en el modelo asociado con esta, La instancia de la vista. También podemos eliminar la representación HTML de la vista de la página llamando a jQuery's retirar() Método, que tiene la ventaja añadida de limpiar cualquier controlador de eventos adjunto a la vista.
Finalmente, obtenemos todos los tipos de modelos en la colección de directorios y verificamos si el tipo de contacto que se acaba de eliminar todavía está contenido dentro de la matriz resultante. Si no es así, no hay más contactos de ese tipo y, por lo tanto, deberíamos eliminar esa opción de la selección.
Seleccionamos el elemento que se eliminará al encontrar primero el cuadro de selección, luego usar un selector de atributo para seleccionar con un atributo de valor que coincide con el eliminadoTipo Variable que guardamos al inicio del método. Si eliminamos todos los contactos de un determinado tipo y luego verificamos el elemento, debemos encontrar que el tipo ya no está en el menú desplegable:
Ok, ese subtítulo es un poco engañoso; lo que quiero decir es que, además de eliminar el modelo y la vista, también debemos eliminar los datos originales de la matriz de contactos de los que se creó originalmente el modelo. Si no lo hacemos, el modelo que se eliminó volverá cuando se filtre. En una aplicación del mundo real, esto es probablemente donde nos sincronizaremos con un servidor para conservar los datos..
La funcionalidad para eliminar el elemento de la matriz original puede residir en nuestra vista maestra; la colección disparará un retirar evento cuando alguno de los modelos se elimina de la colección, por lo que simplemente podemos vincular un controlador para este evento a la colección en la vista maestra. Agregue la siguiente línea de código directamente después de los enlaces existentes:
this.collection.on ("remove", this.removeContact, this); Ya deberías estar bastante familiarizado con esta declaración, pero como recordatorio, el primer argumento del en() El método es el evento que estamos escuchando, el segundo es el controlador que se ejecuta cuando se produce el evento y el tercero es el contexto que se debe utilizar como este cuando se ejecuta el controlador. A continuación podemos añadir el remover contacto() método; después de la agregar contacto() Método agregar el siguiente código:
removeContact: function (removedModel) var remove = removedModel.attributes; if (remove.photo === "/img/placeholder.png") eliminar remove.photo; _. cada (contactos, función (contacto) si (_.isEqual (contacto, eliminado)) contacts.splice (_. indexOf (contactos, contacto), 1););
Backbone pasa a nuestro manejador el modelo que se acaba de eliminar de la colección. Almacenamos una referencia a la colección de atributos para que podamos comparar el modelo que se ha eliminado con los elementos de nuestra matriz de contactos original. Los elementos originales de la matriz de contactos no tenían la propiedad de foto definida, pero como se especifica como propiedad predeterminada, todos nuestros modelos heredarán la propiedad y, por lo tanto, no compararán con los objetos de la matriz de contactos..
En este ejemplo, tenemos que comprobar si el foto propiedad del modelo es el mismo que el valor predeterminado, y si lo es, eliminamos el foto propiedad.
Una vez hecho esto, podemos iterar sobre cada elemento en el contactos array y pruébelo para ver si es el mismo que el modelo que se eliminó de la colección. Podemos comparar cada elemento con el objeto que almacenamos en la variable eliminada usando el subrayado es igual() método.
Si el es igual() método devuelve true, luego llamamos el JavaScript nativo empalme() método en el contactos matriz, pasando el índice del elemento a eliminar y la cantidad de elementos a eliminar. El índice se obtiene utilizando los guiones bajos. índice de() método que usamos anteriormente en.
Ahora, cuando se hace clic en un botón de eliminación, la vista, el modelo y los datos originales se borrarán de la existencia. También podemos filtrar la vista y luego volver a la vista de todos los contactos, y el contacto que se eliminó no se mostrará..
Así que, acabamos de tirar el agregar contacto forma en la página no lo hicimos nosotros? Para cerrar esta parte del tutorial, podemos hacer algo para mantenerlo oculto hasta que se haga clic en un enlace. Podemos añadir el siguiente enlace a la elemento:
Añadir nuevo contacto
Para hacer que el enlace muestre el formulario, primero debemos ocultarlo y luego usar un controlador de eventos de IU para mostrarlo. El enlace se puede añadir a la eventos objeto en el DirectoryView clase:
"haga clic en #showForm": "showForm"
Nuestro showForm () El método puede ser tan simple como el siguiente (¡aunque probablemente querrás hacer un poco más con él que aquí!):
showForm: function () this. $ el.find ("# addContact"). slideToggle (); En este tutorial, analizamos únicamente cómo se pueden agregar nuevos modelos a una colección y cómo se pueden eliminar los modelos de una colección. Vimos que los métodos de Backbone utilizados para agregar y eliminar modelos son, como era de esperar, los añadir() y retirar() metodos.
También vimos cómo podemos vincular los controladores a los eventos que se activan automáticamente cuando se utilizan estos métodos para actualizar la interfaz de usuario y la recopilación según sea necesario..
También observamos algunas funciones de utilidad de subrayado más útiles que podemos usar para trabajar con nuestros datos, incluyendo _índice de() que devuelve ese índice de un elemento en una matriz, y es igual() que se puede usar para comparar profundamente dos objetos para ver si son idénticos.
Al igual que en la última parte de este tutorial, también vimos cómo escribir nuestras clases de tal manera que su funcionalidad se pueda compartir y reutilizar siempre que sea posible. Cuando agregamos un nuevo modelo, por ejemplo, hicimos uso del existente renderContact () método definido en nuestro DirectoryView Clase para manejar la representación del HTML para el nuevo contacto..
Así que hemos visto cómo agregar modelos y eliminarlos, únase a mí en la siguiente parte de esta serie donde veremos cómo editar los datos de modelos existentes..
