HTML and CSS Reference
In-Depth Information
Listing 15.14
Binding
handleSubmit
as event handler
function setView(element) {
element.className = "js-chat";
var handler = this.handleSubmit.bind(this);
dom.addEventHandler(element, "submit", handler);
}
We now pass the current test but again fail previous tests. The reason is that the
controller does not actually define a
handleSubmit
method; thus, any test that
does not stub it fails. The fix is easy enough; define the method on the controller.
Listing 15.15 to the rescue.
Listing 15.15
Adding an empty
handleSubmit
method
/* ... */
function handleSubmit(event) {
}
tddjs.namespace("chat").userFormController = {
setView: setView,
handleSubmit: handleSubmit
};
That's the happy path for
setView
. It should also do basic error checking, at
the very least verify that it receives an argument. I'll leave doing so as an exercise.
15.2.2 Handling the Submit Event
When the user submits the form, the handler should grab the value from the form's
first
input
element whose type is
text
, assign it to the model's
currentUser
property, and then remove the “js-chat” class name, signifying end of life for the
user component. Last, but not least, the handler needs to abort the event's default
action to avoid the browser actually posting the form.
15.2.2.1 Aborting the Default Action
We'll start with that last requirement; the event's default action should be prevented.
In standards compliant browsers, this is done by calling the
preventDefault
method on the event object as Listing 15.16 shows. Internet Explorer does not
support this method, and rather requires the event handler to return false. However,
as you might remember,
addEventHandler
from Chapter 10,
Feature Detection,
takes care of some basic event normalization to smooth things over for us.
