In main.js, you need to instantiate a
FormHandler instance and pass it the selector
for the <form> element:
[data-coffee-order="form"]. Create a
variable at the top of main.js for this
selector so that it can be reused if needed.
(function (window) {
'use strict';
var FORM_SELECTOR = '[data-coffee-order="form"]';
var App = window.App;
...
Next, create a local variable called
FormHandler and assign it to
App.FormHandler.
(function (window) {
'use strict';
var FORM_SELECTOR = '[data-coffee-order="form"]';
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var FormHandler = App.FormHandler;
var myTruck = new Truck('ncc-1701', new DataStore());
...
At the end of the main.js module,
call the FormHandler constructor and pass it the FORM_SELECTOR variable.
This will make sure that the instance of
FormHandler will work with the DOM element
matching that selector. Assign the instance to a new variable
called FormHandler.
...
var Truck = App.Truck;
var DataStore = App.DataStore;
var FormHandler = App.FormHandler;
var myTruck = new Truck('ncc-1701', new DataStore());
window.myTruck = myTruck;
var formHandler = new FormHandler(FORM_SELECTOR);
formHandler.addSubmitHandler();
console.log(formHandler);
})(window);
When you save your code and return to the browser,
the console should report Setting submit handler for form,
showing that addSubmitHandler was
called when the page loaded.
However, if you fill out and submit the form, you will get an error (Figure 10.6).
This is because you did not pass anything to addSubmitHandler. You will correct that in the next section.
You want createOrder to be called each time a
submit event occurs. But you cannot just pass a reference to
createOrder to formHandler.addSubmitHandler.
This is because createOrder’s
owner changes when it is invoked inside of the event
handling callback. With a different owner, the value of this inside
the body of createOrder will not be the Truck
instance, thus causing an error when createOrder runs.
Instead, you will pass a bound reference to myTruck.createOrder to formHandler.addSubmitHandler.
Update formhandler.js with this change.
Make sure to bind the
method reference so that its owner is guaranteed to be
myTruck.
... window.myTruck = myTruck; var formHandler = new FormHandler(FORM_SELECTOR); formHandler.addSubmitHandler(myTruck.createOrder.bind(myTruck)); console.log(formHandler); })(window);
Could you have added bind to the definition of the original prototype method? When defining prototype methods, you have access to the instance, but only inside the method body. bind requires you to have a reference to the intended owner of the invocation – a reference that must be available outside of the method body. As you have no way of referencing the instance from outside the method body, you cannot bind the original prototype method.
Save and fill out your form. After you submit, you should
be able to call myTruck.printOrders and see
that the data you entered into the form has been added to the
list of pending orders, as shown in Figure 10.7.
