Share
Welkom bij het tweede deel van mijn geïndexeerdeDB-artikel. ik sterk raad aan het eerste artikel in deze serie te lezen, omdat ik ervan uitga dat je bekend bent met alle concepten die tot nu toe zijn behandeld. In dit artikel gaan we de CRUD-aspecten die we nog niet eerder hebben voltooid (met name het bijwerken en verwijderen van inhoud) afronden en vervolgens een toepassing in de echte wereld demonstreren die we zullen gebruiken om andere concepten in het laatste artikel te demonstreren..
Laten we beginnen met bespreken hoe een record met IndexedDB moet worden bijgewerkt. Als je je dat herinnert, was het toevoegen van gegevens vrij eenvoudig:
// Definieer een persoon var persoon = naam: naam, e-mail: e-mail, gemaakt: nieuw Datum () // Voer de add var request = store.add (persoon);
Een record bijwerken is net zo eenvoudig. Ervan uitgaande dat u een eigenschap genaamd hebt gedefinieerd ID kaart als uw sleutel voor uw objectwinkel, kunt u eenvoudig het leggen methode in plaats van toevoegen.
var person = naam: naam, email: email, aangemaakt: new Date (), id: someId // Voer de update var request = store.put (persoon) uit;
Zoals de toevoegen methode, kunt u methoden toewijzen om de asynchrone resultaten van de bewerking af te handelen.
Records verwijderen gebeurt via de verwijderingsmethode. (Grote verrassing daar.) Je geeft simpelweg de unieke identiteitskaart door van het record dat je wilt verwijderen. Hier is een eenvoudig voorbeeld:
Accentsconagua
var t = db.transaction (["people"], "readwrite"); var request = t.objectStore ("people"). delete (thisId); En net als elk ander aspect van IndexedDB, kunt u uw handvatten toevoegen voor de asynchrone resultaten.
Dus, zoals ik al zei, niet erg opwindend, wat waarschijnlijk goed is. U wilt dat uw API's eenvoudig, saai en niet verrassend zijn. Laten we nu nemen wat we hebben geleerd en het bij elkaar brengen om een echte, maar eenvoudige toepassing te maken.
Ok, eindelijk hebben we alle (nou ja, de meeste) onderdelen die we nodig hebben om een echte applicatie te bouwen. Omdat het nog niet eerder is gedaan (ahum), gaan we een eenvoudige notitie maken met de toepassing. Laten we een paar screenshots bekijken en dan zal ik je de code erachter laten zien. Bij het opstarten initialiseert de toepassing een geïndexeerdeDB voor de toepassing en geeft een lege tabel weer. Aanvankelijk, alles wat je kunt doen met de applicatie is een nieuwe notitie toevoegen. (We zouden dit misschien wat gebruiksvriendelijker kunnen maken.)
Klikken op de Voeg opmerking toe knop opent een formulier:
Nadat u enkele gegevens in het formulier hebt ingevoerd, kunt u de notitie opslaan:
Zoals je kunt zien, heb je de mogelijkheid om notities te bewerken en te verwijderen. Als u tenslotte op de rij zelf klikt, kunt u de notitie lezen:
Dus niet echt rocket science, maar een volledig werkend voorbeeld van de IndexedDB-specificatie. De opmerkingen die hier worden geschreven, blijven bestaan. U kunt uw browser sluiten, uw machine opnieuw opstarten, een paar jaar vrij nemen om het leven en de poëzie te overwegen, en wanneer u de browser opnieuw opent, zijn uw gegevens nog steeds aanwezig. Laten we de code nu eens bekijken.
Ten eerste - een disclaimer. Deze applicatie zou een perfecte kandidaat zijn geweest voor een van de vele JavaScript-frameworks. Ik weet zeker dat degenen onder u die Backbone of Angular gebruiken, zich al kunnen voorstellen hoe u dit zou instellen. Maar ik heb hier de moedige beslissing voor genomen niet gebruik een kader. Ik maakte me zorgen over zowel de mensen die een ander raamwerk gebruiken als degenen die er geen gebruik van maken. Ik wilde dat onze focus hier alleen lag op de geïndexeerde DB-aspecten. Ik verwacht ten volle van sommige mensen dat ze het niet eens zijn met die beslissing, maar laten we het in de opmerkingen opnemen.
Onze eerste sjabloon is het HTML-bestand. We hebben er maar één en het meeste is boilerplate Bootstrap:
Notitie Database Notitie DatabaseNotitie bewerken
Zoals hierboven vermeld, is een goed formaat gedeelte van dit bestand sjablooncode voor Bootstrap. De delen waar we om geven zijn de noteList div, de noteDetail div, en de noteForm. U kunt waarschijnlijk raden dat dit de DIV's zijn die we zullen updaten als de gebruiker in de applicatie klikt.
Laten we nu eens kijken app.js, het kernbestand dat de logica voor onze toepassing afhandelt.
/ * globale console, $, document, venster, waarschuwing * / var db; functie dtFormat (input) if (! input) return ""; var res = (input.getMonth () + 1) + "/" + input.getDate () + "/" + input.getFullYear () + ""; var hour = input.getHours (); var ampm = "AM"; if (hour === 12) ampm = "PM"; if (uur> 12) uur- = 12; ampm = "PM"; var minute = input.getMinutes () + 1; if (minuut < 10) minute = "0" + minute; res += hour + ":" + minute + " " + ampm; return res;
U kunt de eerste functie negeren omdat het eenvoudigweg een opmaakprogramma voor datums is. Laten we verdergaan naar het jQuery-documentklare blok.
$ (document) .ready (function () if (! ("indexedDB" in venster)) alert ("IndexedDB-ondersteuning vereist voor deze demo!"); return; var $ noteDetail = $ ("# noteDetail") ; var $ noteForm = $ ("# noteForm"); var openRequest = window.indexedDB.open ("nettuts_notes_1", 1); openRequest.onerror = function (e) console.log ("Fout bij openen db"); console .dir (e);; openRequest.onupgradeneeded = functie (e) var thisDb = e.target.result; var objectStore; // Maak een notitie OS als (! thisDb.objectStoreNames.contains ("note")) console .log ("Ik moet de objectstore voor opmerkingen maken"); objectStore = thisDb.createObjectStore ("note", keyPath: "id", autoIncrement: true);; openRequest.onsuccess = function (e) db = e.target.result; db.onerror = function (event) // Generic error handler voor alle fouten die zijn getarget op de // requests! -waarschuwing van deze database ("Databasefout:" + event.target.errorCode); console.dir (event.target);; displayNotes ();; Onze eerste actie is om te controleren op ondersteuning van IndexedDB. Als de browser van de gebruiker niet compatibel is, gebruiken we een waarschuwing en annuleren we de functie. Het is waarschijnlijk beter om ze te verplaatsen naar een pagina die volledig verklaart waarom ze de toepassing niet kunnen gebruiken. (En voor de duidelijkheid, we zouden ook een applicatie kunnen bouwen die gebruik maakte van WebSQL als back-up. Maar nogmaals - mijn focus ligt hier op eenvoud.)
Na het cachen van enkele jQuery-selectors die we in de hele app zullen gebruiken, openen we onze IndexedDB-database. De database is vrij eenvoudig. In de onupgradeneeded handler kun je een object store zien genaamd aantekeningen gecreëerd worden. Zodra alles is gedaan, de onsuccess afhandelaar zal een oproep naar afvuren displayNotes.
displayNotes Functiefunction displayNotes () var transaction = db.transaction (["note"], "readonly"); var content = "
| Titel | bijgewerkt | |
|---|---|---|
| "+ Cursor.value.title +" | "; inhoud + =""+ DtFormat (cursor.value.updated) +" | "; inhoud + ="Bewerken verwijderen | "; inhoud + ="
De displayNotes functie doet wat je verwacht: alle gegevens ophalen en weergeven. We hebben besproken hoe alle rijen met gegevens in het vorige item kunnen worden opgehaald, maar ik wil iets anders aan dit voorbeeld toevoegen. Merk op dat we een nieuwe gebeurtenishandler hebben, onComplete, die we aan de transactie zelf hebben gekoppeld. Eerder hebben we evenementen net binnen de acties gebruikt, binnen de transactie, maar met IndexedDB kunnen we dit ook op het hoogste niveau doen. Dit wordt vooral handig in een geval als dit. We hebben een gigantische reeks, onze HTML-tabel, die we opbouwen voor elke iteratie van onze gegevens. We kunnen de transacties gebruiken onComplete handler om het weergavegedeelte af te ronden en het uit te schrijven met een eenvoudige jQuery-aanroep.
Verwijder, Bewerk, en Toevoegen functies $ ("# noteList"). on ("klik", "a.delet", functie (e) var thisId = $ (this) .parent (). parent (). data ("key"); var t = db.transaction (["note"], "readwrite"); var request = t.objectStore ("note"). delete (thisId); t.oncomplete = function (event) displayNotes (); $ noteDetail.hide (); $ noteForm.hide (); return false;); $ ("# noteList"). on ("klik", "a.edit", functie (e) var thisId = $ (this) .parent (). parent (). data ("key"); var request = db.transaction (["note"], "readwrite") .objectStore ("note") .get (thisId); request.onsuccess = function (event) var note = request.result; $ ("# key" ) .val (note.id); $ ("# title"). val (note.title); $ ("# body"). val (note.body); $ noteDetail.hide (); $ noteForm.show ();; return false;); $ ("# noteList"). on ("click", "td", function () var thisId = $ (this) .parent (). data ("key"); var transaction = db.transaction ([" note "]); var objectStore = transaction.objectStore (" note "); var request = objectStore.get (thisId); request.onsuccess = function (event) var note = request.result; $ noteDetail.html (""+ Note.title +"
"+ Note.body +"
") .show (); $ noteForm.hide ();;); $ (" # addNoteButton "). on (" klik ", functie (e) $ (" # title "). val (" " ); $ ("# body"). val (""); $ ("# key"). val (""); $ noteDetail.hide (); $ noteForm.show ();); Onze volgende twee methoden (verwijderen en Bewerk) is een ander voorbeeld van dezelfde hoofdsom. Aangezien geen van de hier geïndexeerdeDDA-oproepen nieuw is, nemen we niet de moeite om erover te praten. Het grootste deel van het "vlees" is hier eenvoudige DOM-manipulatie om de specifieke acties aan te kunnen. De handler voor het klikken op de knop toevoegen is precies dat, dus we zullen dat ook overslaan.
Opslaan Functie $ ("# saveNoteButton"). on ("klik", functie () var title = $ ("# title"). val (); var body = $ ("# body"). val (); var key = $ ("# key"). val (); var t = db.transaction (["note"], "readwrite"); if (key === "") t.objectStore ("note"). add (title: title, body: body, updated: new Date ()); else t.objectStore ("note") .put (title: title, body: body, updated: new Date (), id: Number (key)); t.oncomplete = function (event) $ ("# key"). val (""); $ ("# title"). val (""); $ (" #body "). val (" "); displayNotes (); $ noteForm.hide (); return false;); ); De volgende interessante lekkernij is de opslaan methode. Het moet een beetje logica gebruiken om te bepalen of we iets toevoegen of bijwerken, maar zelfs dat is vrij eenvoudig. En dat is het! Een complete, zo simpele, geïndexeerdeDB-toepassing. Je kunt zelf met deze demo spelen door de bijgevoegde broncode te downloaden.
Dat is het voor deel twee! Het derde artikel neemt deze toepassing en begint met het toevoegen van extra functies, waaronder zoek- en array-gebaseerde eigenschappen.
