HTML and CSS Reference
In-Depth Information
$(taskPage).find('tbody tr:even').addClass( 'even');
$(taskPage).find( '#btnAddTask' ).click( function(evt) {
evt.preventDefault();
$(taskPage ).find('#taskCreation' ).removeClass( 'not');
});
$(taskPage).find('tbody tr' ).click(function(evt) {
$(evt.target ).closest('td').siblings( ).andSelf( ).toggleClass( 'rowHighlight');
});
$(taskPage ).find('#tblTasks tbody').on('click', '.deleteRow', function(evt) {
evt.preventDefault();
$(evt.target ).parents('tr').remove();
});
$(taskPage).find( '#saveTask' ).click(function(evt) {
evt.preventDefault();
var task = $('form').toObject();
$('#taskRow').tmpl( task).appendTo($(taskPage ).find( '#tblTasks tbody'));
});
initialised = true;
}
}
}
}();
There are a number of features about this controller that should be explained.
Firstly, the controller is storing the page parameter in a local variable called
taskPage
. This
variable is hidden from the outside world using the data hiding approach discussed in earli-
er chapters. This means it is not possible for any other code to change the context that this
controller is working within.
Whenever the controller needs to access an HTML element, it does so in the context of this
page using the following approach:
$(taskPage).find(..)
This ensures that even if the HTML page contains other elements with the same properties
as the elements on our page, they will not be returned in any jQuery selections.
