Taking the inputs data

Most parts are ready now and we will finally deal with the real user input data.

In the view, we cache the inputs for title and ISBN. We also provide a clear function to clear all the inputs data.

1view.inputs = {};
2view.inputs.title = $('#book-title');
3view.inputs.isbn = $('#book-isbn');
4view.inputs.clear = function() {
5  view.inputs.title.val('');
6  view.inputs.isbn.val('');
7}

In the click event, we take the input values and add to the model. Then render the list again and clear the inputs.

 1$('#add-book-btn').click(function(){
 2  // get the input values
 3  var title = app.view.inputs.title.val();
 4  var isbn = app.view.inputs.isbn.val();
 5
 6  // add book to model
 7  app.data.addBook(title, isbn);
 8
 9  // update the view
10  app.view.renderList();
11
12  // clear the inputs
13  app.view.inputs.clear();
14});

What’s next? We’re going to take a look at “Introducing LocalStorage”.

overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content