Modelo
Con respecto a la columna vertebral, lo más básico es el modelo. Esta cosa es como el modelo de mapeo de base de datos en el desarrollo de back-end. También es un modelo de objetos de datos, y debe tener los mismos atributos que el modelo en el back-end (solo los atributos que deben operarse a través del front-end).
Echemos un vistazo a cuál es el modelo de columna vertebral del ejemplo paso a paso.
Primero defina una página HTML:
<! Doctype html> <html> <fead> <title> the5fire-backbone-model </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script> <script> <script> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {/***poniendo código aquí **/}) (jquery); </script> </ html>El siguiente código debe completarse en la función en la etiqueta de script de este HTML.
1. El objeto más simple
Man = backbone.model.extend ({inicialize: function () {alert ('¡Hola, me creas!');}}); Var man = new Man;Esto es muy simple. También hay una presentación modelo en Helloworld, sin definir atributos. Este es un método durante la inicialización o un constructor.
2. Dos métodos de asignación de objetos
El primero es definir directamente y establecer el valor predeterminado.
Man = backbone.model.extend ({inicialize: function () {alerta ('¡Hola, me creas!');}, Predeterminado: {nombre: 'zhang san', edad: '38'}}); var man = new man; alert (man.get ('name'));El segundo tipo se define al asignar
Man = backbone.model.extend ({inicialize: function () {alert ('hey, me creas!');}}); Man.set ({name: 'the5fire', edad: '10 '}); alert (man.get (' name '));Cuando se usa valores Get, se usa GET.
3. Métodos en el objeto
Man = backbone.model.extend ({inicialize: function () {alert ('hey, me creas!');}, Defaults: {name: 'zhang san', edad: '38'}, sobreme: function () {return 'mi nombre es' + this.get ('name') + ', este año' + this.get ('edad') + 'año umbern'};}; Hombre; alerta (man.aboutme ());4. Escuche los cambios en los atributos en el objeto
Man = Backbone.Model.extend({ initialize: function(){ alert('Hey, you create me!'); //Bind listening during initialization this.bind("change:name",function(){ var name = this.get("name"); alert("You changed the name attribute to: " + name); }); }, defaults: { name:'Zhang San', age: '38' }, AboutMe: function () {return 'my name is' + this.get ('name') + ', este año' + this.get ('edad') + 'año'; var man = new Man; man.set ({nombre: 'the5fire'}) // activar el evento de cambio unido, alerta.5. Agregue reglas de verificación al objeto y las indicaciones de error
Man = backbone.model.extend ({inicialize: function () {alert ('hey, me creas!'); // binking escucha durante la inicialización this.bind ("cambiar: nombre", function () {var name = this.get ("name"); alert ("alert (cambió el nombre a:" + name);}); this.bind ("error", error (modelo (modelo, error); }, predeterminados: {name: 'zhang san', edad: '38'}, validate: function (attributes) {if (attributes.name == '' ') {return "Name no puede estar vacío!"; hombre = nuevo hombre; man.set ({nombre: ''}); // Según las reglas de verificación, aparece un mensaje de error.6. La adquisición y el almacenamiento de objetos requieren que se pruebe el soporte del lado del servidor.
Primero, debe definir un atributo de URL para el objeto. Al llamar al método Guardar, todos los atributos del objeto se publicarán en el servidor.
Man = backbone.model.extend ({url: '/save/', inicialize: function () {alert ('¡hey, me creas!'); // Bind Listening durante la inicialización this.bind ("cambiar: nombre", function () {var name = this.get ("name"); alerta ("cambiaste el nombre de nombre a:" + name);}); this.bind ("," error ", error) alerta (error); 'Year-Ond'; // La publicación se enviará a la URL correspondiente al modelo, y el formato de datos es JSON {"Nombre": "the5fire", "edad": 38} // Luego luego obtenga los datos del lado del servidor utilizando el método fetch ([opciones]) var man1 = new man; // en el primer método de figura se utiliza directamente, enviará una solicitud a obtener la solicitud de su modelo de su modelo, //. o publicar en el lado del servidor. man1.fetch (); // En el segundo caso, agregue los parámetros para obtener, como sigue: man1.fetch ({url: '/getMans/'}); // De esta manera, se enviará una solicitud GET a la URL/getMans/. // El estilo de resultado devuelto por el servidor debe ser los datos del formato JSON correspondientes, lo mismo que el formato de publicación al guardar. // Sin embargo, el método para aceptar los datos devueltos por el servidor es el siguiente: man1.fetch ({url: '/getMans/', éxito: function (model, respuesta) {alert ('éxito'); // El modelo es la alerta de datos recuperada (model.get ('name'));}, error: función () {// Cuando el formato de regreso es inycir o no jon datos, este método se ejecuta '); }});Nota: Los códigos anteriores son solo códigos que se pueden ejecutar normalmente, pero habrá instancias sobre el lado del servidor más adelante.
Debe agregarse aquí que la operación asincrónica del servidor se completa a través del método Backbone.sync. Al llamar a este método, se pasará automáticamente un parámetro y la solicitud correspondiente se enviará al servidor de acuerdo con los parámetros. Por ejemplo, si guarda y la columna vertebral determinará si su objeto es nuevo. Si se crea recientemente, el parámetro es Crear. Si es un objeto existente, solo se ha cambiado, entonces el parámetro es la actualización. Si llama al método de búsqueda, se lee el parámetro. Si es Destory, entonces el parámetro es eliminado. Es decir, el llamado crud ("crear", "leer", "actualizar" o "eliminar"), y los tipos de solicitudes correspondientes a estos cuatro parámetros son Post, Get, Put y Delete. Puede realizar las operaciones CRUD correspondientes en el servidor en función de este tipo de solicitud.
Nota:
Con respecto a URL y URLROOT, si establece URL, su RRUD enviará la solicitud correspondiente a esta URL. Sin embargo, otro problema es que se envía la solicitud de eliminación, pero no se envían datos. Entonces no sabe qué objeto (registro) debe eliminarse en el lado del servidor. Así que aquí hay otro concepto de Urlroot. Después de establecer URLROOT, cuando envía solicitudes Put y Eliminar, la dirección de URL de la solicitud es: /Baseurl/§Model.id], por lo que puede actualizar o eliminar el objeto correspondiente (registro) extrayendo los valores después de la URL en el lado del servidor.
Recopilación
La colección es una colección ordenada de objetos modelo. Es muy simple entender el concepto. Si lo mira a través de algunos ejemplos, lo encontrará más simple.
1. Ejemplos sobre libros y estantería
Book = backbone.model.extend ({defaults: {// gracias a los netizens por cambiar la corrección de potencia azul a defaultStitle: 'default'}, inicialize: function () {// alert ('hey, me crea!');}}); Bookshelf = backbone.collection.extend ({model: book}); var book = new book (title {{'{' '' ' book2 = nuevo libro ({Título: 'Book2'}); var book3 = nuevo libro ({título: 'book3'}); // var bookshelf = new BookShelf ([Book1, Book2, Book3]); // Tenga en cuenta que es una matriz, o use AddVar Bookshelf = New Bookshelf; Bookshelf.Add (Book1); Bookshelf.Add (Libro2); Bookshelf.add (Book3); Bookshelf.Remove (Book3); // Basado en la biblioteca JS de la parte inferior, también puede usar cada método para obtener los datos en la colección de la colección de la colección de la colección de la colección de la colección bookshelf.each (function (book) {alert (book.get ('title'));});Muy simple, sin explicación
2. Use la búsqueda para obtener datos del lado del servidor
Primero, debe definir la URL en la estantería de arriba. Tenga en cuenta que la propiedad Urlroot no existe en la colección. O define directamente el valor de la URL en el método de búsqueda, de la siguiente manera:
bookshelf.fetch ({url: '/getbooks/', éxito: function (colección, respuesta) {collection.each (function (book) {alert (book.get ('title'));});}, error: function () {alert ('error');}});También hay dos métodos que aceptan valores de retorno. Creo que es fácil entender el significado específico. Si devuelve los datos en el formato correcto, llamará al método de éxito y se llamará al método de error. Por supuesto, el método de error también depende de agregar los mismos parámetros formales que el método de éxito.
El formato de devoluciones de estantería correspondiente es el siguiente: [{'Título': 'Book1'}, {'Title': 'Book2'} .....]
3. Método de reinicio
Cuando se usa este método, debe coordinarse con la búsqueda anterior. Después de que la recopilación obtiene los datos, se llamará al método de reinicio, por lo que debe definir el método de reinicio o vincular el método de reinicio en la recopilación. Aquí hay una demostración del uso de enlaces:
bookshelf.bind ('reset', showallBooks); showallBooks = function () {bookshelf.each (function (book) {// representa los datos del libro en la página.});}Los pasos de enlace deben realizarse antes de buscar.
El código completo sobre la colección se proporciona a continuación, que requiere soporte del lado del servidor. La construcción del lado del servidor se escribirá más adelante.
<! Doctype html> <html> <fead> <title> the5fire-backbone-collection </title> </thead> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script> <script> <script> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {// colección es una colección ordenada de modelos simples // 1. Un ejemplo de ejemplo de ejemplo de ejemplo de color azul. Corrección a Título de forma predeterminada: 'Predeterminado'}, Initialize: Function () {// Alert ('¡Hey, me crea!'); 'Book3'}); i <bookshelf.models.length; Reset para renderizar bookshelf.bind ('reset', showallBooks); bookshelf.each (función (libro) {// Renderizar los datos del libro en la página.});