HTML and CSS Reference
In-Depth Information
$(document).ready(function() {
tasksController.init($('#taskPage'));
tasksController.loadTasks();
});
The call to
tasksController.init
will be responsible for initializing the storage engine;
therefore it needs to know that it is fully initialized before returning. With the current im-
plementation, the application may start using the storage engine before it is fully initialized,
as it would do in the call to
tasksController.loadTasks
.
In order to solve this we are going to make the
init
method in tasks-controller.js use a call-
back to notify its client when it has truly finished initializing. The following are the changes
to the init method:
init : function(page,
callback
) {
if (initialised) {
callback()
} else {
taskPage = page;
storageEngine.init(function() {
storageEngine.initObjectStore('task', function() {
callback();
}, errorLogger)
}, errorLogger);
The
init
method now accepts a
callback
parameter (which should be a function). If the
module is initialized already, it simply invokes the callback by executing the function. If
the module is not initialized, the callback is not invoked until the
initObjectStore
method
succeeds.
With that in place, we can now change the code in tasks.html as follows:
tasksController.init($('#taskPage'), function() {
tasksController.loadTasks();
});
The page will not attempt to load the tasks into its table until the callback has been invoked
to notify it that the storage engine has fully initialized.
This is as important lesson to learn: as soon as you start developing asynchronous APIs you
need to be conscious of the difference between a function returning control to the caller,
and a function finishing processing. It is often not until the function has finished processing
