29.05.2015 Views

o_19mgorv9t13a3ko71fev19l81mqa.pdf

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Figure 27-4. Demonstrating that the data is retrieved and processed by the browser<br />

The final difference is that the data bindings are live, meaning that changes in the data model are reflected in the content that the<br />

foreach and text bindings generate. To test this, ensure that you return the getAllItems function to its working<br />

state and reload the application. Once the browser has requested, received and processed the data, open the F12 tools and switch<br />

to the Console section. Enter the following command into the console and hit Enter:<br />

model.reservations.pop()<br />

This expression removes the last item from the array of data objects in the model and as soon as you enter the command, the<br />

layout of the HTML page will reflect the change, as shown in Figure 27-5. The overall effect is that I have shifted some of the<br />

complexity of generating the HTML from the server to the client.<br />

Figure 27-5. Manipulating the model via the JavaScript console<br />

Improving the Delete Feature<br />

Now that you have seen how applying Knockout has changed the nature of the client, I am going to quickly loop back and remove<br />

a shortcut that I took when I defined the Ajax methods for the application. The removeItem function is badly written:<br />

723

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!