.

 
Voeg werknemer toe

Dat data-controles-modale = 'add-medewerker-modale' attribuut toont het modaal met die ID wanneer op de knop wordt geklikt.

Dus, de gebruiker moet het formulier invullen, klik dan op? Toevoegen? knop met een id van create-werknemer. Laten we een klikgebeurtenishandler voor de knop indraaien:

$ ('# create-employee'). click (function () var form = $ ('# employee-form'); employeeModal.modal ('hide'); EMPLOYEE.create (form.find ('[name = voornaam]]) val (), form.find ('[naam = achternaam]'). val (), form.find ('[naam = rol]'). val ()); form.find ('input ') .val ("););

We krijgen het formulier en verbergen vervolgens het modale venster. Dan gaan we bellen EMPLOYEE.create methode, waarbij de voornaam, achternaam en rol als de drie parameters worden doorgegeven. Ten slotte wissen we het formulier.

amplify.publish

Maar wacht, u zegt wat er is EMPLOYEE.create? Wel, het is een micro-? Klas? die ik heb ingebracht js / employee.js. Bekijken:

var EMPLOYEE = create: function (firstName, lastName, role) var employee = firstName: firstName, lastName: lastName, role: role, dateEmployed: new Date (); amplify.publish ('employee-created', medewerker); terugkeer medewerker; ;

Je wilt er een scripttag voor gebruiken samen met de anderen.

Best simpel, toch? We maken gewoon een letterlijk object met onze parameters en voegen er een toe Datum in dienst eigendom. Maar dan - en tot slot! - hebben we de eerste toegang tot het AmplifyJS-raamwerk. Hier gebruiken we de component pub / sub-evenementen. Dit is geweldig om losse koppelingen tussen delen van uw app te maken.

Deze methode hoeft niet te weten of een ander deel van onze code iets wil doen met elke nieuwe werknemer die we creëren; Onze? Toevoegen? button event handler hoeft zich daar geen zorgen over te maken. We publiceren het gewoon als een? Employee-created? evenement voor elk onderdeel dat geïnteresseerd is om te nemen. We geven ons nieuwe werknemersobject door als gegevens voor iedereen die geïnteresseerd is. Vervolgens retourneren we het werknemersobject (ook al houden we het niet bij in onze gebeurtenishandler).

Stap 3: Reageren met amplify.subscribe

Zo, is een ander deel van onze app geïnteresseerd in de? employee-created? Ja, in feite. We willen twee dingen doen. Voeg eerst deze medewerker toe aan een tabel op onze pagina. Ten tweede willen we de medewerker opslaan in localStorage. Dit is het eerste deel daarvan:

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

Om te abonneren op een evenement, bellen we amplify.subscribe. We willen abonneren op de? Employee-created ?; wanneer die gebeurtenissen plaatsvinden, willen we deze toevoegen aan de employeeTable; merk op dat in plaats van alleen het doorgeven van de werknemer object, wij? converteren? het naar een array; dit komt omdat we er zeker van moeten zijn dat de elementen in de juiste volgorde staan. Vervolgens willen we een bericht weergeven, zodat onze gebruiker weet dat de medewerker succesvol is toegevoegd.

Wat is hier aan de hand employeeTable variabele? Nou, eerst moeten we het toevoegen

, Voeg dit toe:

Nu moeten we deze tabel vastleggen als een variabele in onze var verklaring bovenaan:

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

En TAFEL? Dat is het laatste stukje JS voor deze puzzel. Zet dit erin js / table.js en vergeet de script-tag niet:

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

Het is een beetje ingewikkeld, maar je zou geen probleem moeten hebben om het te spelen. We hebben een proto eigenschap die het prototype is voor onze tabelinstanties. Dan, als we bellen creëren, we gebruiken Object.create om een ​​object te maken dat erft van this.proto. Daarna noemen we de in het methode om eigenschappen in te stellen. Ten slotte retourneren we de tabelinstantie.

Deze micro-API maakt het gemakkelijk voor ons om met onze tafel te werken. Je zou moeten kunnen zien hoe een array wordt doorgegeven aan de toevoegen methode voegt een rij toe aan onze tabel. Merk ook op dat we een reeks rijen kunnen doorgeven aan laden en vul de tabel op; we zullen dit binnenkort gebruiken.

Oh, dan is daar de newAlert methode die we hebben genoemd:

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

Zoals je kunt zien, voegt dit gewoon gewoon een div binnenstebuiten

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

amplify.subscribe ('employee-created', functie (werknemer) employeeStore.push (medewerker); amplify.store ('employees', employeeStore););

Push data naar server

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