Seleccione la biblioteca correcta
Es muy difícil crear una aplicación JS sin buenas herramientas. JQuery es solo una biblioteca para operar DOM y no proporciona ninguna base para crear una aplicación. Es por eso que queremos una biblioteca especial similar a CANJS.
CANJS es una biblioteca MVC liviana que proporciona las herramientas que necesita para crear una aplicación JS.
CANJS es una biblioteca MVC liviana que proporciona las herramientas que necesita para crear una aplicación JS. Proporciona un marco básico con el modo MVC (modelo-visión-control), enlace de plantilla dinámica, soporte de ruta y seguridad de la memoria. También es compatible con jQuery, Zepto, Mootools, Yui, Dojo, y tiene ricas extensiones y complementos.
Parte uno que aprenderás:
Crear capas de control y ver (plantillas de interfaz de usuario) para mostrar contactos
Use la capa de modelo de modelo para representar datos
Use el complemento de accesorios para simular AJAX para devolver datos
¡Debes estar emocionado! Empecemos a codificar.
Crea tus carpetas y HTML
Primero crea una carpeta para su aplicación y luego crea 4 subcarpetas en el directorio: CSS, JS, Vistas e IMG. como sigue:
contactos_manager
CSS
js
vistas
img
Guarde el siguiente código como index.html:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> CANJS CONTACTS Manager </title>
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/contac.css">
</ablo>
<Body>
<div>
<div>
<div>
<h1> Contacts Manager </h1>
</div>
</div>
<div>
<div>
<div>
<Nav ID = "Filtro"> </am>
</div>
</div>
<div>
<div id = "crear"> </div>
<div id = "contactos"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
En la parte inferior de la página, carga el JS requerido (incluida su aplicación: Contacts.js).
Se pueden descargar los archivos CSS y de imagen utilizados en el tutorial.
Use la vista para crear su interfaz de usuario
La vista se usa para representar la plantilla de UI de su aplicación. CANJS admite una variedad de motores de plantilla. Este artículo utiliza EJS, que incluye y admite la unión dinámica.
Las etiquetas de las plantillas EJS son muy similares a HTML y soportan el código JS. Las tres etiquetas de uso común son las siguientes:
< % Código %> ejecutar js
< %= Código %> ejecutar js y escribir resultados no enviados a HTML en la ubicación actual
< %== Código %> Ejecutar JS y escribir el resultado escapado a HTML en la ubicación actual (para subemplatos).
La plantilla se puede cargar desde un archivo o etiqueta de script, y este tutorial se carga desde un archivo EJS.
Mostrar contactos
Para crear un contacto, primero debe crear una plantilla EJS y guardar el siguiente código como contactSlist.Ejs en su carpeta de vistas:
La copia del código es la siguiente:
<ul>
< % list (contactos, función (contacto) { %>
<li < %= (el)-> el.data ('contacto', contacto) %>>
<%== can.view.render ('vistas/contactView.ejs', {
Contacto: Contacto, categorías: categorías
}) %>
</li>
< %}) %>
</ul>
ContactLists.eJS representará una lista de contactos. Analicemos esta plantilla:
La copia del código es la siguiente:
< % list (contactos, función (contacto) { %>
Si el método de devolución de llamada en el método List () se usa junto con la lista con el Observador, se llamará repetidamente utilizando la unión dinámica una vez que cambie los datos de la lista.
La copia del código es la siguiente:
<li < %= (el)-> el.data ('contacto', contacto) %>>
El código anterior genera A <li> con datos de contacto a través del método de devolución de llamada del elemento. Después del método después de ejecutar la flecha, los datos del objeto El se establecen en el elemento correspondiente.
La copia del código es la siguiente:
<%== can.view.render ('vistas/contactView.ejs', {
Contacto: Contacto, categorías: categorías
}) %>
El código anterior convierte el subtemplato ContactView.Ejs en una persona de contacto. can.view.render () Devuelve HTML con plantilla y datos como parámetros.
Renderizar un solo contacto
Los subtemplates son una buena manera de organizar las vistas en bloques manejables. También hace que sus plantillas sean simples y fáciles de reutilizar. Esta plantilla se utilizará más adelante en el tutorial para crear un contacto, guarde el siguiente código como contactView.ejs e ingrese la carpeta Vistas:
La copia del código es la siguiente:
<a href = "javascript: //"> <i> </i> </a>
<form>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<input type = "text" name = "name" placeHolder = "Agregar nombre"
<%= contact.attr ('nombre')? "Value = '" + Contact.name + "'": "class = 'vacía'" %>>
<select name = "Categoría">
< % $ .each (categorías, función (i, categoría) { %>
<option value = "<%= category.Data%>" <%= contact.Category === Categoría.Data? "Seleccionado": "" %>>
< %= categoría.name %>
</opción>
< %}) %>
</select>
</div>
<div>
<label> dirección </etiqueta>
<input type = "text" name = "dirección"
<%= contact.attr ('dirección')? "Value = '" + Contact.Address + "'": "class = 'vacía'" %>>
<Label> teléfono </seleting>
<input type = "text" name = "teléfono"
<%= contact.attr ('teléfono')? "Value = '" + Contact.Phone + "'": "class = 'vacía'" %>>
<Lelicta> Correo electrónico </etiqueta>
<input type = "text" name = "correo electrónico"
<%= contact.attr ('correo electrónico')? "Value = '" + Contact.email + "'": "class = 'vacía'" %>>
</div>
</div>
</form>
Los atributos de contacto se colocan en la etiqueta <put>, que le permite editar y actualizar la información del usuario.
Revitaliza tu punto de vista (buena literatura ...)
Si ATtr () se usa durante la plantilla de procesamiento de EJS, el código a su alrededor se entregará al procesador de eventos para monitorear los cambios en los atributos correspondientes. Cuando los atributos cambian, la interfaz de usuario asociada en la aplicación se actualizará. Esta función se beneficia del mecanismo de unión dinámica de la plantilla. La unión dinámica de EJS es selectiva y solo se habilitará para los atributos correspondientes cuando se usa attr ().
Usamos una etiqueta <input> en contactView.eJS para comprender su uso:
La copia del código es la siguiente:
<input type = "text" name = "name" placeHolder = "Agregar nombre"
<%= contact.attr ('nombre')? "Value = '" + Contact.name + "'": "class = 'vacía'" %>>
El código en la etiqueta especial se convertirá en un evento y se une al atributo de nombre de este contacto. Cuando el atributo de nombre cambia, el evento se activará y se actualizará la estructura HTML.
Use Can.Control para manejar la lógica de negocios
Can.control crea un control completo organizado, sin fugas internamente, que se puede usar para crear widgets o manejar la lógica de negocios. Cree una instancia de control para un elemento DOM a través de los datos requeridos, y puede definir eventos de enlace de métodos en su control.
Cuando el elemento asociado con el control se elimina del DOM, el control se destruirá y borrará el método unido.
Para crear un control, heredar pasando por el objeto que definió que contenga la función a Can.Control (). También se informó el siguiente incidente.
Cada instancia de control tiene varios valores y especificaciones importantes del método:
Referencias a esta instancia de control
El elemento DOM que creó en esta instancia del elemento
this.
init () se llama cuando la instancia se crea con éxito
Administrar contactos
Agregue el siguiente fragmento de código al archivo contacts.js para crear un control para administrar contactos:
La copia del código es la siguiente:
Contactos = can.control ({
init: function () {
this.element.html (can.view ('vistas/contactslist.ejs', {
Contactos: this.options.Contacts,
Categorías: this.options.Categorías
}));
}
})
Cuando se crea una instancia de contactos, init () hace dos cosas:
Use Can.View () para representar contactos. can.view () recibe dos parámetros: un archivo que contiene plantillas y datos o una etiqueta de tira; Devuelve un DocumentFragment (un contenedor liviano que administra los elementos DOM).
Use jQuery.html () para insertar el fragmento de documentos de Can.view () en el elemento del control
Use el modelo para representar datos
El modelo es la capa abstracta de los datos de la aplicación. Esta aplicación utiliza dos modelos: uno correspondiente a la persona de contacto y la otra correspondiente a la categoría. Agregue el siguiente código a contactos.js:
La copia del código es la siguiente:
Contact = can.model ({
findall: 'obtener /contactos',
Crear: "Publicar /Contactos",
ACTUALIZACIÓN: "PUT /CONTACTS /{ID}",
Destroy: "Eliminar /contactos /{id}"
}, {});
Categoría = can.model ({
findall: 'obtener /categorías'
}, {});
Un modelo tiene 5 métodos que pueden definir datos CRUD, a saber, FindAll, Findone, Crear, actualizar y destruir. Puede reescribir estos métodos, pero la mejor manera es utilizar el servicio REST (transferencia de estado de representación). Al igual que el código anterior, puede preocuparse por ignorar los métodos estáticos que no se utilizarán en la aplicación.
Es importante señalar aquí que la instancia del modelo es en realidad 'observable' de CANJS. Can.observe proporciona el patrón del observador de un objeto Can.observe.list proporciona el patrón de observación de una matriz. Esto significa que puede obtener y establecer datos a través de attr () mientras escucha los cambios en los datos.
El método findall () devuelve un modelo.list, que es el evento desencadenado por Can.observe.list cuando se agrega o elimina el elemento.
Use el accesorio para imitar el descanso
El accesorio intercepta las solicitudes de AJAX y simula la respuesta a través de archivos o métodos. Esto es muy útil para las pruebas, o cuando el backend no está listo. El accesorio es lo que el modelo de aplicación simula descansa.
Primero, debe preparar algunos datos al accesorio y agregar el siguiente código a:
La copia del código es la siguiente:
contactos var = [
{
ID: 1,
Nombre: 'William',
Dirección: '1 canjs way',
Correo electrónico: '[email protected]',
Teléfono: '0123456789',
Categoría: 'compañeros de trabajo'
},
{
ID: 2,
Nombre: 'Laura',
Dirección: '1 canjs way',
Correo electrónico: '[email protected]',
Teléfono: '0123456789',
Categoría: 'Amigos'
},
{
ID: 3,
Nombre: 'Lee',
Dirección: '1 canjs way',
Correo electrónico: '[email protected]',
Teléfono: '0123456789',
Categoría: 'Familia'
}
];
categorías var = [
{
ID: 1,
Nombre: 'Familia',
Datos: 'Familia'
},
{
ID: 2,
Nombre: 'Amigos',
Datos: 'Amigos'
},
{
ID: 3,
Nombre: 'compañeros de trabajo',
Datos: 'compañeros de trabajo'
}
];
Con los datos, conéctelo al accesorio para simular el descanso. Can.fixture () recibe dos parámetros. La URL que queremos interceptar y los archivos y métodos a los que respondemos. Por lo general, las URL que desea interceptar son dinámicas y siguen un patrón. Simplemente agregue comodines encerrados con {} en la URL.
Agregue el siguiente código a contactos.js:
La copia del código es la siguiente:
can.fixture ('get /contactos', function () {
devolver [contactos];
});
var id = 4;
can.fixture ("post /contactos", function () {
return {id: (id ++)}
});
can.fixture ("put /contactos /{id}", function () {
devolver {};
});
can.fixture ("Eliminar /contactos /{id}", function () {
devolver {};
});
can.fixture ('get /categories', function () {
devolver [categorías];
});
Los primeros cuatro accesorios simulan las respuestas Get, Post, Put y Elimine del modelo de contacto, y el Quinto simula la respuesta GET del modelo de categoría.
Iniciar la aplicación
Su aplicación tiene un modelo que administra datos, genera las vistas de los contactos y organiza todo esto en control. Todo lo que tienes que hacer ahora es iniciar la aplicación. ¡Ahora necesitas iniciar la aplicación!
Agregue el siguiente código a contactos.js:
La copia del código es la siguiente:
$ (documento) .Ready (function () {
$ .When (categoría.findall (), contact.findall ()). Entonces (
función (categoryResponse, contactresponse) {
categorías var = categoryResponse [0],
contactos = contactresponse [0];
nuevos contactos ('#contactos', {
contactos: contactos,
Categorías: Categorías:
});
});
});
Analicemos este código:
La copia del código es la siguiente:
$ (documento) .Ready (function () {
Use el método jQuery.Ready para escuchar la preparación del DOM.
La copia del código es la siguiente:
$ .When (categoría.findall (), contact.findall ()). Entonces (
función (categoryResponse, contactresponse) {
Llame al método findall () de dos modelos para obtener los tipos de todos los contactos. Dado que FindAll () tiene un retraso, $ .When () asegura que el método de devolución de llamada se ejecute solo después de que las dos solicitudes se completen al mismo tiempo.
La copia del código es la siguiente:
categorías var = categoryResponse [0],
contactos = contactresponse [0];
Obtenga el conjunto de datos de la instancia del modelo correspondiente de los dos métodos findall (). es el primer elemento de la matriz devuelto por la respuesta.
La copia del código es la siguiente:
nuevos contactos ('#contactos', {
contactos: contactos,
Categorías: Categorías:
});
Crea un control del contacto para el elemento #Contacts. Los conjuntos de datos de contacto y tipo se envían a control.
Abra su aplicación con un navegador y verá la siguiente lista de contactos:
Resumir
Este es el primer capítulo de la serie Tutorial, y ya ha aprendido sobre el núcleo de CANJS:
Modelos de la capa de abstracción de los datos de su aplicación
Vistas plantillas que convierten los datos en HTML
Controles Las organizaciones se relacionan con todo