.

 
Añadir empleado

Ese data-controls-modal = 'add-employee-modal' atributo mostrará el modal con dicha ID cuando se hace clic en el botón.

Por lo tanto, el usuario deberá completar el formulario, haga clic en "Agregar". botón que tiene una identificación de crear empleado. Entonces, conectemos un controlador de eventos de clic para el botón:

$ ('# create-employee'). click (function () var form = $ ('# employee-form'); employeeModal.modal ('hide'); EMPLOYEE.create (form.find ('[name = primer nombre] '). val (), form.find (' [nombre = apellido] '). val (), form.find (' [nombre = rol] '). val ()); form.find (' entrada ') .val ("););

Obtenemos el formulario, y luego ocultamos la ventana modal. Entonces, vamos a llamar a un EMPLEADO.crear Método, pasando el nombre, el apellido y el rol como los tres parámetros. Finalmente, se borra el formulario..

amplificar. publicar

Pero espera, dices, ¿qué? EMPLEADO.crear? Bueno, es una micro clase? que he puesto en js / employee.js. Echale un vistazo:

var EMPLOYEE = create: function (firstName, lastName, role) var employee = firstName: firstName, lastName: lastName, role: role, dateEmployed: new Date (); amplify.publish ('empleado-creado', empleado); empleado de retorno ;

Usted querrá lanzar una etiqueta de script para arriba con los demás.

Bastante simple, ¿verdad? Simplemente creamos un objeto literal con nuestros parámetros y agregamos un Fecha de Empleo propiedad. Pero, entonces, ¡y finalmente! Tenemos la primera entrada del framework AmplifyJS. Aquí, estamos usando el componente pub / sub events. Esto es ideal para hacer acoplamientos sueltos entre partes de su aplicación..

Este método no tiene que saber si otra parte de nuestro código quiere hacer algo con cada nuevo empleado que creamos; ¿Nuestro? ¿Añadir? botón de controlador de eventos no tiene que preocuparse por ello. Solo lo publicaremos como? Creado por los empleados? Evento para cualquier parte que este interesado en tomar. Pasamos nuestro nuevo objeto de empleado como datos para cualquier persona interesada. Luego, devolvemos el objeto de empleado (aunque no lo seguimos en nuestro controlador de eventos).

Paso 3: Reaccionando con amplificar. suscribirse

Asi que, es ¿Alguna otra parte de nuestra aplicación interesada en el? creado por los empleados? Sí, de hecho. Queremos hacer dos cosas. Primero, agregue este empleado a una tabla en nuestra página. Segundo, queremos almacenar al empleado en localStorage. Aquí está la primera parte de eso:

 amplify.subscribe ('empleado-creado', función (employee) employeeTable.add ([employee.firstName, employee.lastName, employee.role, employee.dateEmployed]); newAlert ('success', 'New Employee Added') ;);

Para suscribirse a un evento, llamamos amplificar. suscribirse. Queremos suscribirnos a los "empleados creados"; cuando ocurran esos eventos, queremos agregarlo a la tabla de empleados; Observe que en lugar de simplemente pasarlo empleado objeto, nos convertimos? a una matriz Esto se debe a que debemos estar seguros de que los elementos estarán en el orden correcto. Luego, queremos mostrar un mensaje, informando a nuestro usuario que el empleado fue agregado exitosamente.

Que pasa con esto tabla de empleados ¿variable? Bueno, primero, tenemos que añadir el

, Agrega esto:

Ahora, tenemos que capturar esta tabla como una variable arriba en nuestra var declaración en la parte superior:

employeeTable = TABLE.create ($ ('# employee-table')),

Y MESA? Esa es la última pieza de JS para este rompecabezas. Pon esto en js / table.js y no olvides la etiqueta de script:

var TABLE = proto: init: function (el) this.element = $ (el) .find ('tbody'); , agregue: function (arr) var row = $ ('') .html (function () return $ .map (arr, function (value) return''+ valor +''; ). join (");); this.element.append (row);, load: function (rows, order) for (var i = 0; rows [i]; i ++) this.add ( filas [i]); var campos = []; para (var j = 0; orden [j]; j ++) fields.push (filas [i] [orden [j]]); this.add (campos );, clear: function () this.element.empty ();, create: function (el) var table = Object.create (this.proto); table.init (el); return table; ;

Es un poco complicado, pero no deberías tener ningún problema en asimilarlo. Tenemos un proto Propiedad que es el prototipo para nuestras instancias de tabla. Entonces, cuando llamamos crear, usamos Object.create para crear un objeto que hereda de esto.proto. Después de eso, llamamos al en eso Método para establecer cualquier propiedad. Finalmente, devolvemos la instancia de tabla..

Esta micro-API nos facilita trabajar con nuestra mesa. Deberías poder ver cómo pasar una matriz a la añadir Método añadirá una fila a nuestra tabla. Tenga en cuenta también que podemos pasar una matriz de filas a carga y llenar la tabla; usaremos esto pronto.

Oh, entonces está la nuevoAlert método que llamamos:

función newAlert (tipo, mensaje) $ ('# alert-area'). append ($ ('
 '+ mensaje +' 
')); setTimeout (function () $ ('. alert-message'). fadeOut ('slow', function () this.parentNode.removeChild (this););, 2000); 

Como puede ver, esto simplemente agrega un div De adentro hacia afuera

employeeStore = amplify.store ('empleados') || [];

amplify.subscribe ('creado por el empleado', función (employee) employeeStore.push (empleado); amplify.store ('empleados', employeeStore););

Empuje los datos al servidor

amplify.request.define ('pushData', 'ajax', url: 'data.php', tipo: 'POST');