Share
Bienvenido de nuevo a la Construyendo un visor de contenido con Backbone serie. En las primeras cuatro partes, observamos casi todos los componentes principales que se entregan con la última versión de Backbone, incluidos modelos, controladores, vistas y enrutadores.
En esta parte del tutorial, vamos a conectar nuestra aplicación a un servidor web para que podamos almacenar nuestros contactos en una base de datos. No estaremos viendo LocalStorage; Este es un medio popular para conservar los datos que utilizan las aplicaciones Backbone, pero el hecho es que ya hay una serie de excelentes tutoriales disponibles sobre este tema..
Necesitaremos un servidor web y una base de datos para esta parte del tutorial. Utilizo el VWD de Microsoft como editor, que viene con un servidor web incorporado y funciona bien con el servidor MSSQL, así que esto es lo que usaremos. En verdad, realmente no importa qué pila decidas ir con.
La instalación y configuración de cualquiera de estas tecnologías (servidor VWD y MSSQL) está fuera del alcance de este tutorial, pero es relativamente sencillo de hacer y hay muchas guías buenas por ahí.
Una vez instalada, querrá configurar una nueva base de datos que contenga una tabla para almacenar los datos. Las columnas de la tabla deben reflejar las diferentes propiedades que utilizan nuestros modelos, por lo que debe haber una columna de nombre, una columna de dirección, etc. La tabla se puede rellenar con los datos de ejemplo que hemos utilizado en toda la serie hasta ahora.
Una columna que debería aparecer en nuestra nueva tabla, pero que no hemos utilizado en nuestros datos de prueba locales es una carné de identidad, que debe ser único para cada fila en la tabla. Para facilitar su uso, probablemente desee configurar esto para que se incremente automáticamente cuando los datos se agregan a la tabla.
Para comunicarnos con el servidor, Backbone nos da la Sincronizar módulo; Este es el único módulo importante que aún no hemos utilizado, por lo que comprenderlo completará nuestro conocimiento de los fundamentos del marco..
Llamando a la sincronizar () el método hace que se realice una solicitud al servidor; de forma predeterminada, asume que jQuery o Zepto están en uso y delega la solicitud a cualquiera de los presentes para realizar realmente. También supone que una interfaz RESTful está esperando en el back-end, por lo que de forma predeterminada utiliza los métodos POST, PUT, GET, DELETE HTTP. Como hemos visto, Backbone puede configurarse para recurrir a los métodos GET y POST de la vieja escuela con encabezados adicionales que especifican la acción prevista.
Además de poder llamar sincronizar () directamente, los modelos y las colecciones también tienen métodos que se pueden utilizar para comunicarse con el servidor; modelos tienen la destruir(), ha podido recuperar(), analizar gramaticalmente() y salvar() métodos, y las colecciones tienen ha podido recuperar() y analizar gramaticalmente(). los destruir() ha podido recuperar() y sincronizar () todos los métodos difieren a sincronizar () Ya sea utilizado con modelos o colecciones. los analizar gramaticalmente() El método, llamado automáticamente cada vez que el servidor devuelve los datos, es por defecto un simple no-op que simplemente devuelve la respuesta del servidor, pero se puede anular si queremos preprocesar la respuesta antes de consumirla..
La forma en que los datos del modelo se reinician en la página variará según la tecnología de back-end que se utilice.
La documentación de Backbone para el ha podido recuperar() El método (de una colección) indica que este método no debe usarse en la carga de la página inicial para solicitar los modelos requeridos del servidor. A continuación, se detalla más en la sección de preguntas frecuentes que una página debe tener los módulos necesarios ya disponibles en la página de carga para evitar la solicitud inicial de AJAX.
Esta es una gran idea y si bien no tenemos que seguir explícitamente los consejos, hacerlo hará que nuestra aplicación sea un poco más ágil, y eso solo puede ser algo bueno..
La manera en que los datos del modelo se reinician en la página variará según la tecnología de back-end que se esté utilizando. Vamos a utilizar .net en este ejemplo, por lo que una forma de hacerlo sería crear dinámicamente un La lógica real en el código subyacente que realiza la lectura de la base de datos y la serialización de la lista puede variar enormemente dependiendo de la implementación, y está algo más allá del alcance de este tutorial; estamos más interesados en obtener esa carga útil inicial en la página que nosotros sobre cómo lo conseguimos realmente. Siéntase libre de revisar el archivo de clase en la descarga del código que se adjunta, probablemente por la forma más rápida y sencilla, pero de ninguna manera la mejor manera de hacerlo.. En este punto, deberíamos poder eliminar la matriz de contactos que contenía nuestros datos ficticios de En este ejemplo, he usado un archivo ASMX .net 4.0 para manejar las solicitudes desde el front-end. Para que el back-end pueda ver los datos que se le envían, debemos configurar el La necesidad o no de configurar estas propiedades al crear una aplicación Backbone de verdad depende completamente de la tecnología de back-end con la que elija trabajar. Por lo tanto, nuestra aplicación podría modificar los datos de varias maneras; podría cambiar los atributos de un contacto que ya existe, podría agregar un contacto completamente nuevo o podría eliminar un contacto que ya existe. La lógica para hacer todas estas cosas en el front-end ya existe, pero ahora que hay un servidor involucrado, el comportamiento de la página ya ha cambiado. Aunque la página se mostrará como lo hizo antes, si intentamos eliminar un contacto, Backbone emitirá un error quejándose de que no se ha definido una URL. La razón de esto es porque usamos el Veamos cómo restaurar la funcionalidad de eliminación. Lo primero que debemos hacer es definir un Especificamos una función como el valor de la Ahora, si eliminamos uno de los contactos cuando ejecutamos la página, se realiza una solicitud POST al servicio web. Un A continuación podemos actualizar el Todo lo que hacemos es encadenar el Todo lo que queda por hacer en el front-end es actualizar el Hemos recortado el Esta vez el Al igual que con el código del lado del servidor utilizado al inicio de esta parte del tutorial para iniciar los datos del modelo inicial en nuestra aplicación, el código utilizado para procesar y manejar las solicitudes realizadas por Backbone está fuera del alcance del tutorial. Aquí solo nos interesa el front-end. Como antes, el servicio web utilizado para esta demostración se incluye en el archivo de código y está completamente comentado, así que revíselo si está interesado. También he incluido una copia de seguridad de la base de datos, que deberías poder restaurar para comenzar con los datos de demostración.. En esta parte del tutorial, analizamos algunos de los métodos que podemos usar para delegar a Backbone's Vimos cómo Backbone realiza de forma predeterminada las solicitudes REST a una URL específica y cómo podemos configurarla para trabajar con servidores heredados que no operan según los principios de REST. También vimos algunos de los métodos que delegamos a También observamos lo fácil que es cambiar los símbolos que el subrayado utiliza para interpolar los datos en una plantilla. Esto ahora concluye el tutorial de Contact Manager; Si bien hay muchas más funciones que podríamos agregar a la aplicación, ahora hemos cubierto los conceptos básicos de lo que se necesita para crear una aplicación completamente funcional utilizando el excelente Backbone.js. Gracias por leer. app.js, ejecute la página (a través del servidor web WVD incorporado, o IIS) y vea exactamente la misma página, con casi la misma funcionalidad, como vimos al final de la parte 4. Yay!
Sincronizando nuestra aplicación con el servidor
emularHTTP y emulateJSON Propiedades de la columna vertebral. Agregue las siguientes líneas de código directamente después de cambiar la sintaxis de la plantilla de subrayado:Backbone.emulateHTTP = true; Backbone.emulateJSON = true;
destruir() método en el borrar contacto() método de nuestro ContactView clase.url Atributo para nuestros modelos. Añadir la propiedad a la Contacto Clase que define un modelo individual:url: function () return "/ContactManager.asmx/ManageContact?id=" + this.get ("id"); url propiedad, que devuelve la URL que se debe utilizar para realizar las solicitudes a. En este ejemplo, podemos usar un archivo de servicio web asmx para manejar las solicitudes. También añadimos el nombre de nuestro método web (GestionarContacto) y añada el carné de identidad del modelo como parámetro de cadena de consulta.X-HTTP-Method-Override el encabezado se agrega a la solicitud que especifica que el método HTTP deseado fue BORRAR. Podemos usar esto en nuestra lógica de servicio web para determinar qué acción tomar en la base de datos.guardar ediciones () método de la ContactView clase para que notifique al servicio web cuando se edita un contacto; cambiar la línea de código que utiliza el conjunto() Método para que aparezca así:this.model.set (formData) .save ();
salvar() método en el conjunto() método. los salvar() método delegados a la sincronizar () Método que realiza una solicitud POST al servidor. Como antes de la carné de identidad del modelo se envía como una cadena de consulta y una X-HTTP-Method-Override se utiliza para especificar el método PUT previsto. Esta vez sin embargo, el Tipo de contenido el encabezado se establece en aplicación / x-www-form-urlencoded (Si no configuramos el emulateJSON propiedad sería aplicación / json) y los datos del modelo se envían como datos de formulario, que podemos utilizar para realizar los cambios necesarios..agregar contacto() método de la DirectoryView clase. Anteriormente, en este método teníamos una instrucción if que verificaba el tipo de modelo que se estaba agregando para ver si el menú de selección debía actualizarse. Ahora deberíamos cambiar esa instrucción if para que aparezca como sigue:if (_.indexOf (this.getTypes (), formData.type) === -1) this. $ el.find ("# filter"). find ("select"). remove (). end () .append (this.createSelect ()); this.collection.create (formData); Si declaración hacia abajo para eliminar el más Condición, haciendo el código un poco más ordenado. También hemos eliminado el añadir() método y añadió el crear() Método en su lugar. los crear() El método agregará automáticamente el nuevo modelo a la colección sin que nosotros creamos manualmente una nueva instancia de la clase de nuestro modelo, y también hará una solicitud al servidor, una vez más, delegando en sincronizar ().X-HTTP-Method-Override no es necesario establecer el encabezado, porque POST es el método que usaríamos si la solicitud se hiciera a una interfaz REST de todos modos. Como con el salvar() método, los datos del modelo pasados a la crear() El método se entrega al servidor como datos de formulario..
Resumen
sincronizar () Método para comunicarse con un back-end que puede persistir los cambios realizados usando el front-end de la aplicación..sincronizar () Para comunicarse con el servidor. Específicamente, cubrimos el retirar(), salvar() y crear() métodos y miró lo que se envía al servidor y cómo.
Accentsconagua