.

 
Aggiungi dipendente

Quello data-controlli-modal = 'add-impiegato-modale' l'attributo mostrerà il modale con detto ID quando si fa clic sul pulsante.

Quindi, l'utente dovrà compilare il modulo, fare clic su? Aggiungi? pulsante che ha un ID di creare-dipendente. Quindi, colleghiamo un gestore di eventi click per il pulsante:

$ ('# create-employee'). click (function () var form = $ ('# employee-form'); employeeModal.modal ('hide'); EMPLOYEE.create (form.find ('[nome = firstName] '). val (), form.find (' [name = lastName] '). val (), form.find (' [nome = ruolo] '). val ()); form.find (' input ') .val ("););

Otteniamo il modulo e quindi nascondiamo la finestra modale. Quindi, chiameremo un EMPLOYEE.create metodo, passando il nome, il cognome e il ruolo come i tre parametri. Alla fine, cancelliamo il modulo.

amplify.publish

Ma aspetta, tu dici, cosa c'è EMPLOYEE.create? Bene, è un micro-? Classe? che ho messo dentro JS / employee.js. Controlla:

var EMPLOYEE = create: function (firstName, lastName, role) var employee = firstName: firstName, lastName: lastName, ruolo: role, dateEmployed: new Date (); amplify.publish ('dipendente creato', impiegato); restituire dipendente; ;

Dovrai lanciare un tag script per farlo apparire con gli altri.

Abbastanza semplice, vero? Creiamo solo un oggetto letterale con i nostri parametri e aggiungiamo a dateEmployed proprietà. Ma allora - e finalmente! - abbiamo il primo ingresso nel framework AmplifyJS. Qui, stiamo usando il componente pub / sotto eventi. Questo è ottimo per fare un accoppiamento lento tra parti della tua app.

Questo metodo non deve sapere se un'altra parte del nostro codice vuole fare qualcosa con ogni nuovo dipendente che creiamo; Il nostro? Aggiungi? il gestore di eventi del pulsante non deve preoccuparsene. Lo pubblicheremo semplicemente come "creato da un dipendente"? evento per ogni parte che è interessata a prendere. Passiamo il nostro nuovo oggetto dipendente come dati per chiunque sia interessato. Quindi, restituiamo l'oggetto dipendente (anche se non ne teniamo traccia nel gestore eventi).

Step 3: Reagire con amplify.subscribe

Così, è qualsiasi altra parte della nostra app interessata al? dipendente creato ?? Sì, infatti. Vogliamo fare due cose. Innanzitutto, aggiungi questo dipendente a un tavolo sulla nostra pagina. In secondo luogo, vogliamo archiviare il dipendente in localStorage. Ecco la prima parte di questo:

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

Per iscriversi ad un evento, chiamiamo amplify.subscribe. Vogliamo iscriversi al? Dipendente creato ?; quando si verificano tali eventi, vogliamo aggiungerlo al employeeTable; notare che invece di limitarsi a passare il dipendente oggetto, convertiamo? a un array; questo perché abbiamo bisogno di essere sicuri che gli elementi saranno nel giusto ordine. Quindi, vogliamo visualizzare un messaggio, facendo sapere al nostro utente che il dipendente è stato aggiunto con successo.

Che succede con questo employeeTable variabile? Bene, in primo luogo, dobbiamo aggiungere il

, Aggiungi questo:

Ora, dobbiamo catturare questo tavolo come una variabile nel nostro var dichiarazione in alto:

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

E TAVOLO? Questo è l'ultimo pezzo di JS per questo puzzle. Mettilo dentro js / table.js e non dimenticare il tag dello script:

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

È un po 'complicato, ma non dovresti avere problemi a farlo. Abbiamo un proto proprietà che è il prototipo per le nostre istanze di tabella. Quindi, quando chiamiamo creare, noi usiamo Object.create per creare un oggetto che eredita da this.proto. Dopo ciò, chiamiamo il dentro metodo per impostare qualsiasi proprietà. Infine, restituiamo l'istanza della tabella.

Questa micro-API ci facilita il lavoro con il nostro tavolo. Dovresti essere in grado di vedere come passare un array al Inserisci il metodo aggiungerà una riga alla nostra tabella. Si noti inoltre che possiamo passare una serie di righe a caricare e riempire il tavolo; lo useremo presto.

Oh, poi c'è il newAlert metodo che abbiamo chiamato:

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

Come puoi vedere, questo semplicemente aggiunge un div alla rovescia

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

amplify.subscribe ('impiegato-creato', funzione (impiegato) employeeStore.push (impiegato); amplify.store ('dipendenti', impiegatoStore););

Invia dati al server

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