.

 
Ajouter un employé

Cette data-controls-modal = 'add-employee-modal' attribut affichera le modal avec ledit ID lorsque le bouton sera cliqué.

Ainsi, l'utilisateur devra remplir le formulaire, cliquez sur le bouton? Ajouter? bouton qui a un identifiant de créer-employé. Alors connectons un gestionnaire d’événements click pour le bouton:

$ ('# create-employee'). click (function () var form = $ ('# employee-form'); employeeModal.modal ('hide'); EMPLOYEE.create (form.find ('[name = prenom] '). val (), form.find (' [nom = nom] '). val (), form.find (' [nom = rôle] '). val ()); form.find (' entrée ') .val ("););

Nous obtenons le formulaire, puis masquons la fenêtre modale. Ensuite, nous allons appeler un EMPLOYEE.create méthode, en passant le prénom, le nom et le rôle en tant que les trois paramètres. Enfin, nous effaçons le formulaire.

amplifier.publier

Mais attendez, vous dites, c'est quoi EMPLOYEE.create? Eh bien, c'est une classe micro? que j'ai mis en js / employee.js. Vérifiez-le:

var EMPLOYEE = create: function (prénom, nom, rôle) var employé = prénom: prénom, nom: dernier nom, rôle: rôle, dateEmployé: nouveau Date (); amplify.publish ('créé par l'employé', employé); retour employé ;

Vous voudrez jeter une balise de script pour cela avec les autres.

Assez simple, non? Nous venons de créer un littéral d'objet avec nos paramètres et d'ajouter un Date employée propriété. Mais, alors et enfin!, Nous avons la première entrée du framework AmplifyJS. Ici, nous utilisons le composant pub / sub events. C'est idéal pour effectuer un couplage lâche entre des parties de votre application..

Cette méthode n'a pas besoin de savoir si une autre partie de notre code veut faire quelque chose avec chaque nouvel employé que nous créons. Notre? Ajouter? le gestionnaire d'événement de bouton n'a pas à s'en inquiéter. Nous allons simplement le publier en tant que? Créé par un employé? événement pour toute partie qui est intéressé à prendre. Nous transmettons notre nouvel objet employé sous forme de données à toute personne intéressée. Ensuite, nous retournons l'objet employé (même si nous n'en gardons pas trace dans notre gestionnaire d'événements)..

Étape 3: Réagir avec amplify.subscribe

Alors, est toute autre partie de notre application intéressée par le? employé-créé ??? Oui, en fait. Nous voulons faire deux choses. Tout d’abord, ajoutez cet employé à un tableau de notre page. Deuxièmement, nous voulons stocker l'employé dans le stockage local. Voici la première partie de cela:

 amplify.subscribe ('employee-created', fonction (employee) employeeTable.add ([employee.firstName, employee.lastName, employee.role, employee.dateEmployed]); newAlert ('success', 'New Employee Added') ;);

Pour vous abonner à un événement, nous appelons amplify.subscribe. Nous voulons nous abonner à la? Employé-créé ?; quand cela se produit, nous voulons l'ajouter à la employeeTable; remarquez qu'au lieu de simplement passer le employé objet, nous? convertissons? à un tableau; En effet, nous devons nous assurer que les éléments seront dans le bon ordre. Ensuite, nous souhaitons afficher un message pour informer notre utilisateur que l’employé a été ajouté avec succès..

Quoi de neuf avec ça employeeTable variable? Eh bien, premièrement, nous devons ajouter le

, Ajoute ça:

Maintenant, nous devons capturer ce tableau comme une variable dans notre var déclaration en haut:

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

Et TABLE? C'est la dernière pièce de JS pour ce puzzle. Mettez ceci dans js / table.js et n'oubliez pas le tag script:

var TABLE = proto: init: function (el) this.element = $ (el) .find ('tbody'); , ajouter: function (arr) var row = $ ('') .html (function () return $ .map (arr, fonction (valeur) return''+ valeur +''; ). join (");); this.element.append (ligne);, load: function (lignes, ordre) pour (var i = 0; lignes [i]; i ++) this.add ( lignes [i]); var champs = []; pour (var j = 0; ordre [j]; j ++) champs.push (lignes [i] [ordre [j]]); ceci.add (champs );, clear: function () this.element.empty ();, create: function (el) var table = Objet.create (this.proto); table.init (el); table retour; ;

C'est un peu compliqué, mais vous ne devriez pas avoir de problème à le faire. Nous avons un proto propriété qui est le prototype de nos instances de table. Puis, quand on appelle créer, nous utilisons Object.create pour créer un objet qui hérite de this.proto. Après cela, nous appelons le init méthode pour définir les propriétés. Enfin, nous retournons l'instance de table.

Cette micro-API nous permet de travailler facilement avec notre table. Vous devriez être capable de voir comment passer un tableau à la ajouter La méthode ajoutera une ligne à notre table. Notez également que nous pouvons passer un tableau de lignes à charge et remplissez la table; nous l'utilisons bientôt.

Oh, alors il y a le nouveauAlert méthode que nous avons appelée:

function newAlert (type, message) $ ('# zone d'alerte'). append ($ ('
 '+ message +' 
')); setTimeout (function () $ ('. alert-message'). fadeOut ('slow', function () this.parentNode.removeChild (this);), 2000); 

Comme vous pouvez le constater, ceci ajoute simplement un div à l'envers

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

amplify.subscribe ('créé par l'employé', fonction (employé) employéStore.push (employé); amplify.store ('employés', employéStore););

Push Data to Server

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