Also for the Update use case, we have an HTML page for the user interface (updateBook.html) and a view code file (src/v/updateBook.js). The HTML form for the UI of the "update book" operation has a selection field for choosing the book to be updated, an output field for the standard identifier attribute isbn, and an input field for each attribute of the Book class that can be updated. Notice that by using an output field for the standard identifier attribute, we do not allow changing the standard identifier of an existing object.

<main>
 <form id="Book">
  <div><label>Select book: 
    <select name="selectBook">
     <option value=""> --- </option></select>
  </label></div>
  <div><label>ISBN: <output name="isbn" /></label></div>
  <div><label>Title: <input name="title" /></label></div>
  <div><label>Year: <input name="year" /></label></div>
  <div><button type="button" name="commit">
   Save Changes</button></div>
 </form>
</main>

Notice that we include a kind of empty option element, with a value of "" and a display text of ---, as a default choice in the selectBook selection list element. So, by default, the value of the selectBook form control is empty, requiring the user to choose one of the available options for filling the form.

The setupUserInterface procedure now has to populate the select element's option list by loading the collection of all book objects from the data store and creating an option element for each book object:

pl.v.updateBook = {
  setupUserInterface: function () {
    var formEl = document.forms['Book'],
        saveButton = formEl.commit,
        selectBookEl = formEl.selectBook;
    var key="", keys=[], book=null, optionEl=null, i=0;
    Book.retrieveAll();
    // populate the selection list with books
    keys = Object.keys( Book.instances);
    for (i=0; i < keys.length; i++) {
      key = keys[i];
      book = Book.instances[key];
      optionEl = document.createElement("option");
      optionEl.text = book.title;
      optionEl.value = book.isbn;
      selectBookEl.add( optionEl, null);
    }
    // when a book is selected, populate the form
    selectBookEl.addEventListener("change", 
	    pl.v.updateBook.handleBookSelectionEvent);
    // set an event handler for the submit/save button
    saveButton.addEventListener("click",
        pl.v.updateBook.handleSaveButtonClickEvent);
    // handle the event when the browser window/tab is closed
    window.addEventListener("beforeunload", Book.saveAll);
  },
  ...
}

A book selection event is caught via a listener for change events on the select element. When a book is selected, the form is filled with its data:

  handleBookSelectionEvent: function () {
    var formEl = document.forms['Book'];
    var selectBookEl = formEl.selectBook,
        book=null, key = selectBookEl.value;
    if (key) {
      book = Book.instances[key];
      formEl.isbn.value = book.isbn;
      formEl.title.value = book.title;
      formEl.year.value = book.year;
    } else {
      formEl.reset();
    }
  },

When the save button is activated, a slots record is created from the form field values and used as the argument for calling Book.update:

  handleSaveButtonClickEvent: function () {
    var formEl = document.forms['Book'];
    var slots = { isbn: formEl.isbn.value, 
          title: formEl.title.value, 
          year: formEl.year.value
        };
    Book.update( slots);
    formEl.reset();
  }