Buceando en CanJS Parte 3

Esta es la parte final de un tutorial de tres partes que le enseñará cómo crear una aplicación de administrador de contactos en JavaScript, utilizando CanJS y jQuery. Cuando haya terminado con este tutorial, tendrá todo lo que necesita para crear sus propias aplicaciones de JavaScript utilizando CanJS!

En la segunda parte, creó las vistas y los controles necesarios para mostrar las categorías, creó los ayudantes Model.List, usó el enrutamiento para filtrar los contactos y modificó su EJS para aprovechar el enlace en vivo.

En esta parte del tutorial, usted:

Editar y eliminar contactos utilizando la Contacto Controlar
Crea un control y una vista para crear contactos
Escuche DOM y modele eventos usando los controladores de eventos con plantilla de Control

Se agregarán a los archivos de origen de la parte uno y dos, así que si aún no lo ha hecho, póngase al día leyendo la parte uno y dos..

Actualizando un contacto

En la primera parte, contactView.ejs Coloca cada propiedad de un contacto en una etiqueta de entrada. Para actualizar un contacto cuando cambien estas entradas, deberá agregar algunos controladores de eventos a la Contacto Controlar. Agregar este codigo contactos.js dentro de Contactos Controlar:

 '.contact input focusout': function (el, ev) this.updateContact (el); , '.contact input keyup': function (el, ev) if (ev.keyCode == 13) el.trigger ('blur'), '.contact select change': function (el, ev) this.updateContact (el), updateContact: function (el) var contact = el.closest ('. contact'). data ('contact'); contact.attr (el.attr ('nombre'), el.val ()). save ();

Revisemos este código línea por línea y veamos cómo funciona:

 '.contact input focusout': function (el, ev) this.updateContact (el); ,

Llamadas updateContact () cuando alguno pierde el foco.

 '.contact input keyup': function (el, ev) if (ev.keyCode == 13) el.trigger ('blur')

Desencadena el difuminar evento en un si se presiona la tecla enter mientras tiene foco. Esto hará que la entrada pierda el foco, que es manejado por el enfoque controlador de eventos.

 '.contact select change': function (el, ev) this.updateContact (el),

Llamadas updateContact () cuando el valor de la coincide con una propiedad de contacto, por lo que el.attr ('nombre') devolverá el nombre de la propiedad que se está actualizando. salvar() se utiliza para guardar el cambio en el Contacto Modelo.

Eliminar un contacto

Hay un pequeño enlace con una 'X' en la esquina superior derecha de cada contacto. Cuando se hace clic en este, el contacto debe ser eliminado. Para hacer esto, agregue otro controlador de eventos a la Contactos control que se ve así:

 '.remove click': function (el, ev) el.closest ('. contact'). data ('contact'). destroy ();

Cuando el X se hace clic, la instancia de contacto se recupera de la más cercana

y destruir() se llama. destruir() elimina el contacto del modelo y lo elimina de cualquier modelo. Listas.

Live Binding actualizará automáticamente su interfaz de usuario cuando se elimine un contacto..

Creando un Contacto

Ahora creará el Control y la Vista necesarios para crear un contacto. Primero necesitarás un botón gigante de "Nuevo Contacto". Añadir este código a index.html justo encima

   Nuevo contacto

También deberá crear una nueva Vista que mostrará un formulario para crear un contacto. Guarde este código como createView.ejs en su carpeta de vistas:

  <%== can.view.render('views/contactView.ejs',  contact: contact, categories: categories ) %>   Guardar cancelar

Esta vista hace que el contactView.ejs sub-plantilla y agrega "Guardar" y "Cancelar" botones. Esto es lo que parece en la aplicación:

Ahora necesitarás crear un nuevo control llamado Crear que mostrará el formulario y guardará el nuevo contacto en el Contacto Modelo. Añadir este código a contactos.js:

 Create = can.Control (show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categorías: 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);, '.save click': function (el) this.createContact (el), '.cancel click': function () this .hide ();, createContact: function () var form = this.element.find ('form'); values = can.deparam (form.serialize ()); if (values.name! == "" ) this.contact.attr (valores) .save (); this.hide (););

Revisemos este Control en detalle para ver qué está pasando:

 show: function () this.contact = new Contact (); this.element.html (can.view ('views / createView.ejs', contact: this.contact, categorías: this.options.categories)); this.element.slideDown (200); ,

Crea un contacto vacío utilizando nuevo contacto() y lo asigna a esto.contacto. El nuevo contacto se pasa a puedo ver() junto con las categorías a ser prestadas.

 hide: function () this.element.slideUp (200); ,

Desliza el formulario fuera de la vista.

 '.contact input keyup': function (el, ev) if (ev.keyCode == 13) this.createContact (el);

Llamadas crear contacto() Si se presiona la tecla Enter mientras está en una de las entradas.

 '.save click': function (el) this.createContact (el),

Llamada crear contacto() cuando se hace clic en el botón "Guardar".

 '.cancel click': function () this.hide (); ,

Llamadas esconder() cuando se hace clic en el botón "Cancelar".

 var form = this.element.find ('form'); valores = can.deparam (form.serialize ());

Encuentra el

elemento y utiliza jQuery publicar por fascículos() función para obtener una cadena que representa todos los valores del formulario. Entonces la cadena serializada se convierte en un objeto usando can.deparam ().

 if (values.name! == "") this.contact.attr (valores) .save (); this.hide ();

Si el nombre del contacto no está vacío, attr () se utiliza para actualizar el contacto almacenado en esto.contacto. salvar() se llama para guardar los cambios en el modelo y el formulario se oculta llamando esconder().

Uso de controladores de eventos con plantilla

Los controles también admiten controladores de eventos con plantillas que le permiten personalizar un controlador de eventos y escuchar eventos en objetos distintos a este.elemento.

Puedes personalizar el comportamiento del manejador usando NOMBRE en el controlador de eventos. La variable dentro de las llaves se mira hacia arriba en el Control esta.opciones primero, y luego el ventana. Puede crear varias instancias del mismo Control pero personalizar el comportamiento de sus controladores de eventos en cada instancia.

Los controles también pueden vincularse a objetos distintos de este.elemento utilizando controladores de eventos con plantillas. Si la variable dentro NOMBRE es un objeto, Control se unirá a ese objeto para escuchar eventos. El objeto no tiene que ser un elemento DOM, puede ser cualquier objeto como un Modelo. Para escuchar un clic en cualquier parte de una página que utilizarías: 'documento clic'. como su controlador de eventos.

Estos manejadores se limpiarán cuando se destruya la instancia de Control. Esto es fundamental para evitar las pérdidas de memoria que son comunes en las aplicaciones JavaScript..

Mostrando el formulario

Deberá usar un controlador de eventos con plantilla para mostrar el formulario cuando se haga clic en el botón "Nuevo contacto". Agregue este controlador de eventos a la Crear Control en contactos.js:

 'document # new-contact click': function () this.show ();

El botón "Nuevo contacto" está fuera de la Crear Elemento de control, por lo que 'documento # nuevo contacto' Se utiliza como selector para el botón. Cuando se hace clic, el formulario se deslizará hacia abajo a la vista.

Inicializando el Control de Crear

Al igual que los otros controles en su aplicación, deberá crear una nueva instancia de Crear Controlar. Actualice su función de documento listo en contactos.js para parecerse a esto:

 $ (document) .ready (function () $ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse) var categories = categoryResponse [0], contacts = contactResponse [0 ]; nuevo Crear ('# crear', categorías: categorías); nuevos Contactos ('# contactos', contactos: contactos, categorías: categorías); nuevo Filtro ('# filtro', contactos: contactos, categorías : categorías););)

Con este cambio, una instancia de la Crear El control se creará en el #crear elemento. Se pasará la lista de categorías..

Reaccionando a un nuevo contacto

Cuando se crea un nuevo contacto, el Modelo.Lista almacenado en el Contactos El control necesita ser actualizado. Haces esto usando controladores de eventos con plantillas. Agregue este controlador de eventos a la Contactos Control en contactos.js:

 'Contact created': function (list, ev, contact) this.options.contacts.push (contact);

Esto se une a la creado evento de la Contacto Modelo. El nuevo contacto se añade a la Modelo.Lista almacenado en el Contactos Control usando empujar().

El enlace en vivo actualizará la UI de sus aplicaciones automáticamente cuando se agregue el contacto a esta.opciones.contactos.

Terminando

Eso es todo para la parte final de este tutorial. En la tercera parte usted:

Se utilizaron controladores de eventos en un control para crear un nuevo contacto.
Crea una vista que representa una forma de creación.
Se utilizaron controladores de eventos con plantilla en un control para enlazar objetos que no sean el elemento del control

Este es el final del tutorial del administrador de contactos de CanJS. Aquí hay un resumen de lo que se cubrió en este tutorial de tres partes:

Creando controles para gestionar la lógica de la aplicación.
Renderizar partes de una aplicación con vistas
Representando la capa de datos de una aplicación usando Modelos
Simulando un servicio REST con accesorios.
Uso del enlace en vivo para mantener la interfaz de usuario de una aplicación sincronizada con su capa de datos
Escuchando eventos con los controladores de eventos de Control.
Trabajar con listas de instancias de modelos usando Model.List

Ahora tiene todo lo que necesita para crear aplicaciones JavaScript utilizando CanJS. Ve a construir algo impresionante.

Para obtener documentación completa y más aplicaciones de ejemplo, visite CanJS. Gracias por leer!

Código

Buceando en canjs

Buceando en CanJS Parte 2