HTML and CSS Reference
In-Depth Information
function(evt) {
storageEngine.delete('task', $(evt.target).data().taskId, function() {
$(evt.target).parents('tr').remove();
}, errorLogger);
}
);
When any delete button is clicked, the element that was clicked is available $(evt.target).
We then use the HTML5 data() function to obtain all the data attributes associated with the
element. This extracts all the attributes that begin with “data-“ and makes them available in
an object, where each property in the object represents one of the data attributes.
You may have noticed that the attribute “data-task-id” is available as data().taskId. Since
attribute names are converted to lower case inside the DOM, hyphens are typically used
to separate words in attribute names. In JavaScript, the common convention is to separate
words through the use of capitalisation. The data() object therefore converts attribute names
into forms more conventional for use in JavaScript.
The data attribute could have also been retrieved with the following call:
$(evt.target).attr('data-task-id');
Also note that we only update the table once we know that the storage engine has success-
fully deleted the row. This ensures that if there is an error during the processing, the screen
does not get out of sync with the storage engine.
If you now delete a row, and refresh the page, you will see the task has been permanently
deleted.
Finally, we will add the two remaining functions to the storageEngine:
findByProperty : function(type, propertyName, propertyValue, successCallback, errorCallback) {
if (!initialized) {
errorCallback('storage_api_not_initialized', 'The storage engine has not been initialized');
} else if (!initializedObjectStores[type]) {
errorCallback('store_not_initialized', 'The object store '+type+' has not been initialized');
}
var result = [];
var storageItem = getStorageObject(type);
$.each(storageItem, function(i, v) {
if (v[propertyName] === propertyValue) {
