HTML and CSS Reference
In-Depth Information
result.push(v);
}
});
successCallback(result);
},
findById : function (type, id, 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 storageItem = getStorageObject(type);
var result = storageItem[id];
successCallback(result);
}
The implementations of these methods should now look fairly straightforward. They are
continuing the same pattern of obtaining the object store, and accessing the relevant items
from this to return to the client.
With all the pieces of the storage engine in place, we can add “edit” functionality to the ap-
plication. This will allow tasks to be updated after they have been created. This will utilize
the same form as the one used to add tasks, therefore the form needs to contain a hidden
field to capture the existing id of an object if there is one:
<form id="taskForm">
<input type="hidden" name="id"/>
This will allow us to serialize and de-serialize all properties of the task, not just the visible
properties.
Next, change the edit button in the template from this:
<a href="#">Edit</a>
to this:
<a href="#" class="editRow" data-task-id="${id}">Edit</a>
This is following the same pattern that was established with the delete buttons.
With this in place, we can add an event listener in the init method of tasks-controller.js.
When the user clicks to edit a task in the table, the task will be retrieved from the storage
Search WWH ::




Custom Search