The starting point of our restricted association elimination procedure is an information design model with various kinds of unidirectional associations, such as the model shown in Figure Figure 1.6 above. If the model still contains any non-directional associations, we first have to turn them into directional ones by making a decision on the ownership of their ends, as discussed in Section Section 5.

A unidirectional association connecting a source with a target class is replaced with a corresponding reference property in its source class having

This replacement procedure is illustrated for the case of a unidirectional one-to-one association in Figure Figure 1.3 above.

For the case of a unidirectional one-to-many association, Figure Figure 1.8 below provides an illustration of the association elimination procedure. Here, the non-functional association end at the target class Point is turned into a corresponding reference property with name points obtained as the pluralized form of the target class name.

Figure 1.8. Turn a non-functional association end into a corresponding reference property

In the case of our running example, the Publisher-Book-Author information design model, we have to replace both unidirectional associations with suitable reference properties. In the first step, we replace the many-to-one association Book-has-Publisher in the model of Figure Figure 1.6 with a functional reference property publisher in the class Book, resulting in the following OO design model:

Notice that since the target association end of the Book-has-Publisher association has the multiplicity 0..1, we have to declare the new property publisher as optional by appending the multiplicity 0..1 to its name.

In the second step, we replace the many-to-many association Book-has-Author in the model of Figure Figure 1.7 with a multi-valued reference property authors in the class Book, resulting in the following OO design model:

Figure 1.9. An OO design model for Book and Author

After the platform-independent OO design model has been completed, one or more platform-specific data models, for a choice of specific implementation platforms, can be derived from it. Such a platform-specific data model can still be expressed in the form of a UML class diagram, but it contains only modeling elements that can be directly coded in the chosen platform. Thus, for any platform considered, two guidelines are needed: 1) how to make the platform-specific data model, and 2) how to code this model.

These steps are discussed in more detail in the following sections.

Each class C of the JavaScript class model is coded as an ES6 class with the same name C and a constructor having a single record parameter slots, which has a key-value slot for each (non-derived) property of the class. The range of these properties should be indicated in a comment. In the case of a reference property the range is another model class.

In the constructor body, we first assign default values to all properties. The default value of a reference property is null. These default values will be used when the constructor is invoked as a default constructor, that is, without any argument. If the constructor is invoked with a slots argument, the default values may be overwritten by calling the setter methods for all properties.

For instance, the Publisher class from the JavaScript class model is coded in the following way:

class Publisher {
  constructor (slots) {
    // set the default values for the parameter-free default constructor
    this._name = "";           // String
    this._address = "";        // String
    // is constructor invoked with a non-empty slots argument?
    if (typeof slots === "object" && Object.keys( slots).length > 0) {
      // assign properties by invoking implicit setters
      this.name = slots.name;
      this.address = slots.address;
    }
  }
  ...
};

Since the setters may throw constraint violation exceptions, the constructor function, and any setter, should be called in a try-catch block where the catch clause takes care of logging suitable error messages.

For each model class C, we define a class-level property C.instances representing the collection of all C instances managed by the application in the form of an entity table (a map of records): This property is initially set to {}. For instance, in the case of the model class Publisher, we define:

Publisher.instances = {};

The Book class from the JavaScript class model is coded in a similar way:

class Book {
  constructor (slots) {
    // set the default values for the parameter-free default constructor
    this._isbn = "";   // string
    this._title = "";  // string
    this._year = 0;          // Number (PositiveInteger)
    this._authors = {};      // map of associated Author objects
    // this._publisher          optional reference property
    // is constructor invoked with a non-empty slots argument?
    if (typeof slots === "object" && Object.keys( slots).length > 0) {
      this.isbn = slots.isbn;
      this.title = slots.title;
      this.year = slots.year;
      // assign object reference or ID reference
      this.authors = slots.authors || slots.authors_id;
      this.publisher = slots.publisher || slots.publisher_id;
    }
  }
  ...
}

Notice that the Book constructor can be invoked either with an object reference slots.publisher or with an ID reference slots.publisher_id. This approach makes using the Book constructor more flexible and more robust.

Take care that all constraints of a property as specified in the JavaScript class model are properly coded in its check function, as explained in Part 2 of tour tutorial. Recall that constraint violation (or validation error) classes are defined in the file lib/errorTypes.js.

For instance, for the Publisher.checkName function we obtain the following code:

class Publisher {
  ...
  static checkName( n) {
    if (n === undefined) {
      return new NoConstraintViolation();  // not mandatory
    } else {
      if (typeof n !== "string" || n.trim() === "") {
        return new RangeConstraintViolation(
		    "The name must be a non-empty string!");
      } else {
        return new NoConstraintViolation();
      }
    }
  }
  ...
}

Notice that, since the name attribute is the standard ID attribute of Publisher, we only check syntactic constraints in checkName, and check the mandatory value and uniqueness constraints in checkNameAsId, which invokes checkName:

  static checkNameAsId( n) {
    var constraintViolation = Publisher.checkName(n);
    if ((constraintViolation instanceof NoConstraintViolation)) {
      if (n === undefined) {
        return new MandatoryValueConstraintViolation(
            "A publisher name is required!");
      } else if (Publisher.instances[String(n)]) { 
        constraintViolation = new UniquenessConstraintViolation(
            "There is already a publisher record with this name!");
      } else {
        constraintViolation = new NoConstraintViolation();
      }
    }
    return constraintViolation;
  }

If we have to deal with ID references (foreign keys) in other classes, we need to provide a further check function, called checkNameAsIdRef, for checking the referential integrity constraint:

  static checkNameAsIdRef( n) {
    var constraintViolation = Publisher.checkName( n);
    if ((constraintViolation instanceof NoConstraintViolation) &&
        n !== undefined) {
      if (!Publisher.instances[n]) {
        constraintViolation = new ReferentialIntegrityConstraintViolation(
            "There is no publisher record with this name!");
      }
    }
    return constraintViolation;
  }

The condition (!Publisher.instances[n]) checks if there is no publisher object with the given name n, and then creates a constraintViolation object. This referential integrity constraint check is used by the Book.checkPublisher function:

class Book {
  ...
  static checkPublisher( publisher_id) {
    var constraintViolation = null;
    if (!publisher_id) {
      constraintViolation = new NoConstraintViolation();  // optional
    } else {
      // invoke foreign key constraint check
      constraintViolation = Publisher.checkNameAsIdRef( publisher_id);
    }
    return constraintViolation;
  }
  ...
}

In the setters, the corresponding check function is invoked and the property is only set, if the check does not detect any constraint violation. In the case of a reference property, we allow invoking the setter either with an object reference or with an ID reference. The resulting ambiguity is resolved by testing if the argument provided in the invocation of the setter is an object or not. For instance, the publisher setter is coded in the following way:

class Book {
  ...
  set publisher( p) {
    var constraintViolation = null;
    var publisher_id = "";
    // p can be an ID reference or an object reference
    publisher_id = (typeof p !== "object") ? p : p.name;
    constraintViolation = Book.checkPublisher( publisher_id);
    if (constraintViolation instanceof NoConstraintViolation) {
      // create the new publisher reference
      this._publisher = Publisher.instances[ publisher_id];
    } else {
      throw constraintViolation;
    }
  }
  ...
}

For any reference property, we have to choose and implement one of the two possible deletion policies discussed in Section 2 for managing the corresponding object destruction dependency in the destroy method of the property's range class. In our case, when deleting a publisher record, we have to choose between

We choose the second option. This is shown in the following code of the Publisher.destroy method where for all concerned book objects book the property book.publisher is cleared:

Publisher.destroy = function (name) {
  var publisher = Publisher.instances[name];
  var book=null, keys=[], i=0;
  // delete all references to this publisher in book objects
  keys = Object.keys( Book.instances);
  for (i=0; i < keys.length; i++) {
    book = Book.instances[keys[i]];
    if (book.publisher === publisher) delete book.publisher;
  }
  // delete the publisher record
  delete Publisher.instances[name];
  console.log("Publisher " + name + " deleted.");
};

Notice that the deletion of all references to the deleted publisher is performed in a sequential scan through all book objects. which may be inefficient when there are many of them. It would be much more efficient when each publisher object would hold a list of references to all books published by this publisher. Creating and maintaining such a list would make the association between books and their publisher bidirectional.

In the case of a reference property, like Book::publisher, the serialization function toString() has to show a human-readable identifier of the referenced object, like this.publisher.name:

class Book {
  ...
  toString() {
    var bookStr = "Book{ ISBN:"+ this.isbn +", title:"+ this.title +
        ", year:"+ this.year;
    if (this.publisher) bookStr += ", publisher:"+ this.publisher.name;
    return bookStr + "}";
  }

The object-to-record conversion function toRecord converts typed objects with object references to corresponding (untyped) record objects with ID references:

  toRecord() {
    var rec = {};
    Object.keys( this).forEach( function (p) {
      // copy only property slots with underscore prefix
      if (p.charAt(0) === "_") {
        switch (p) {
        case "_publisher":
          // convert object reference to ID reference
          if (this._publisher) rec.publisher_id = this._publisher.name;
          break;
        default:
          // remove underscore prefix
          rec[p.substr(1)] = this[p];
        }
      }
    }, this);
    return rec;
  }
}

The inverse conversion, from untyped record objects with ID references to corresponding typed objects with object references, is performed by the Book constructor, which tolerates both ID references and object references as arguments for setting reference properties.

For initializing a data management use case, the required data (for instance, all publisher and book records) have to be loaded from persistent storage. This is performed in a controller procedure such as pl.c.books.manage.initialize in c/books.js with the following code:

pl.c.books.manage = {
  initialize: function () {
    Publisher.retrieveAll();
    Book.retrieveAll();
    pl.v.books.manage.setUpUserInterface();
  }
};

The initialize method for managing book data first loads the publishers table and the books table since the book data management UI needs to show their data. Then the book data management menu is rendered by calling the setUpUserInterface procedure.

In our example, we have only one reference property, Book::publisher, which is functional and optional. For showing information about the optional publisher of a book in the Retrieve/list all use case, the corresponding cell in the HTML table is filled with the name of the publisher, if there is any:

pl.v.books.retrieveAndListAll = {
  setupUserInterface: function () {
    var tableBodyEl = document.querySelector(
                      "section#Book-R>table>tbody");
    var keys = Object.keys( Book.instances);
    var row=null, listEl=null, book=null;
    tableBodyEl.innerHTML = "";
    for (var i=0; i < keys.length; i++) {
      book = Book.instances[keys[i]];
      row = tableBodyEl.insertRow(-1);
      row.insertCell(-1).textContent = book.isbn;
      row.insertCell(-1).textContent = book.title;
      row.insertCell(-1).textContent = book.year;
      row.insertCell(-1).textContent = 
          book.publisher ? book.publisher.name : "";
    }
    document.getElementById("Book-M").style.display = "none";
    document.getElementById("Book-R").style.display = "block";
  }
};

For a multi-valued reference property, the table cell would have to be filled with a list of all associated objects referenced by the property.

For allowing to select objects to be associated with the currently edited object from in the Create and Update use cases, an HTML selection list (i.e., a select element) is populated with option elements formed from the instances of the associated object type with the help of a utility method fillSelectWithOptions. The HTML select element is defined in the books.html view file:

<section id="Book-C" class="UI-Page">
 <h1>Public Library: Create a new book record</h1>
 <form>
  ... 
  <div class="select-one">
   <label>Publisher: <select name="selectPublisher"></select></label>
  </div>
  ...
 </form>
</section>

The Create user interface is set up by the following procedure:

pl.v.books.create = {
  setupUserInterface: function () {
    var formEl = document.querySelector("section#Book-C>form"),
        publisherSelectEl = formEl.selectPublisher,
        saveButton = formEl.commit;
    // define event handlers for responsive validation 
    formEl.isbn.addEventListener("input", function () {
      formEl.isbn.setCustomValidity( 
          Book.checkIsbnAsId( formEl.isbn.value).message);
    });
    // set up the publisher selection list
    util.fillSelectWithOptions( publisherSelectEl, 
        Publisher.instances, "name");
    // define event handler for saveButton click events    
    saveButton.addEventListener("click", 
        this.handleSaveButtonClickEvent);
    // define event handler for neutralizing the submit event
    formEl.addEventListener("submit", function (e) { 
      e.preventDefault();
      formEl.reset();
    });
    // replace the manage form with the create form
    document.getElementById("Book-M").style.display = "none";
    document.getElementById("Book-C").style.display = "block";
    formEl.reset();
  },
  handleSaveButtonClickEvent: function () {
    ...
  }
};

When the user clicks (or touches) the save button, all form control values, including the value of the select control, are copied to a slots list, which is used as the argument for invoking the add method after all form fields have been checked for validity, as shown in the following program listing:

  handleSaveButtonClickEvent: function () {
    var formEl = document.querySelector("section#Book-C>form");
    var slots = {
        isbn: formEl.isbn.value, 
        title: formEl.title.value,
        year: formEl.year.value,
        publisherIdRef: formEl.selectPublisher.value
    };
    // check input fields and show constraint violation error messages 
    formEl.isbn.setCustomValidity( Book.checkIsbnAsId( slots.isbn).message);
    /* ... (do the same with title and year) */
    // save the input data only if all of the form fields are valid
    if (formEl.checkValidity()) {
      Book.add( slots);
    }
  }

The setupUserInterface code for the update book use case is similar.

For the multi-valued reference property Book::authors, we need to code the operations addAuthor and removeAuthor. Both operations accept one parameter denoting an author either by ID reference (the author ID as integer or string) or by an object reference. The code of addAuthor is as follows:

  addAuthor( a) {
    var constraintViolation=null,
        authorIdRef=0, key="";
    // a can be an ID reference or an object reference
    authorIdRef = (typeof a !== "object") ? parseInt( a) : a.authorId;
    constraintViolation = Book.checkAuthor( authorIdRef);
    if (authorIdRef &&
        constraintViolation instanceof NoConstraintViolation) {
      // add the new author reference
      key = String( authorIdRef);
      this._authors[key] = Author.instances[key];
    } else {
      throw constraintViolation;
    }
  }

In the removeAuthor method, the author reference is first checked and, if no constraint violation is detected, the corresponding entry in the map this._authors is deleted:

  removeAuthor( a) {
    var constraintViolation=null, authorIdRef="";
    // a can be an ID reference or an object reference
    authorIdRef = (typeof a !== "object") ? parseInt( a) : a.authorId;
    constraintViolation = Book.checkAuthor( authorIdRef);
    if (constraintViolation instanceof NoConstraintViolation) {
      // delete the author reference
      delete this._authors[String( authorIdRef)];
    } else {
      throw constraintViolation;
    }
  }

For assigning an array of ID references, or a map of object references, to the property Book::authors, the method setAuthors adds them one by one with the help of addAuthor:

  set authors( a) {
    var keys=[], i=0;
    this._authors = {};
    if (Array.isArray(a)) {  // array of IdRefs
      for (i=0; i < a.length; i++) {
        this.addAuthor( a[i]);
      }
    } else {  // map of object references
      keys = Object.keys( a);
      for (i=0; i < keys.length; i++) {
        this.addAuthor( a[keys[i]]);
      }
    }
  }

For the reference property Book::authors, we have to choose and implement a deletion policy in the destroy method of the Author class. We have to choose between

We go for the second option. This is shown in the following code of the Author.destroy method where for all concerned book objects book the author reference book.authors[authorKey] is dropped:

Author.destroy = function (id) {
  var authorKey = String(id),
      author = Author.instances[authorKey],
      key="", keys=[], book=null, i=0;
  // delete all dependent book records
  keys = Object.keys( Book.instances);
  for (i=0; i < keys.length; i++) {
    key = keys[i];
    book = Book.instances[key];
    if (book.authors[authorKey]) delete book.authors[authorKey];
  }
  // delete the author object
  delete Author.instances[authorKey];
  console.log("Author " + author.name + " deleted.");
};

We need a serialization function toString() for converting an object to a human-readable string representation that can be used for showing an object in a user interface, and an object-to-record mapping function toRecord() converting a typed object to a corresponding record that can be saved in a persistent datastore. In both cases, internal object references are converted to ID references.

The toString() function creates a string representation that may only contain the relevant properties. The simplest method for showing a set of associated objects, like the authors of a book, is creating a comma-separated list of IDs:

class Book {
  ...
  toString() {
    var bookStr = "Book{ ISBN:"+ this.isbn + ", title:" + 
        this.title + ", year:" + this.year;
    if (this.publisher) {
      bookStr += ", publisher:" + this.publisher.name;
    }
    return bookStr +", authors:" + 
        Object.keys( this.authors).join(",") +"}";
  }

The toRecord() function needs to serialize all properties of an object, deleting the underscore prefix for obtaining the corresponding record field name:

   toRecord() {
    var row = {};
    Object.keys( this).forEach( function (p) {
      // copy only property slots with underscore prefix
      if (p.charAt(0) === "_") {
        switch (p) {
        case "_publisher":
          // convert object reference to ID reference
          if (this._publisher) row.publisher_id = this._publisher.name;
          break;
        case "_authors":
          // convert the map of object references to a list of ID references
          row.authorIdRefs = [];
          Object.keys( this.authors).forEach( function (authorIdStr) {
            row.authorIdRefs.push( parseInt( authorIdStr));
          });
          break;
        default:
          row[p.substr(1)] = this[p];  // remove underscore prefix
        }
      }
    }, this);
    return row;
  }

For showing information about the authors of a book in the Retrieve/List All use case, the corresponding cell in the HTML table is filled with a list of the names of all authors with the help of the utility function util.createListFromMap:

pl.v.books.retrieveAndListAll = {
  setupUserInterface: function () {
    var tableBodyEl = document.querySelector(
	                  "section#Book-R>table>tbody");
    var i=0, row=null, book=null, listEl=null, 
	    keys = Object.keys( Book.instances);
    tableBodyEl.innerHTML = "";  // drop old contents
    for (i=0; i < keys.length; i++) {
      book = Book.instances[keys[i]];
      row = tableBodyEl.insertRow(-1);
      row.insertCell(-1).textContent = book.isbn;
      row.insertCell(-1).textContent = book.title;
      row.insertCell(-1).textContent = book.year;
      // create list of authors
      listEl = util.createListFromMap( book.authors, "name");
      row.insertCell(-1).appendChild( listEl);
      // if the book has a publisher, show its name
      row.insertCell(-1).textContent = 
	      book.publisher ? book.publisher.name : "";
    }
    document.getElementById("Book-M").style.display = "none";
    document.getElementById("Book-R").style.display = "block";
  }
};

The utility function util.createListFromMap has the following code:

createListFromMap: function (m, displayProp) {
  var listEl = document.createElement("ul");
  util.fillListFromMap( listEl, m, displayProp);
  return listEl;
},
fillListFromMap: function (listEl, m, displayProp) {
  var keys=[], listItemEl=null;
  // drop old contents
  listEl.innerHTML = "";
  // create list items from object property values
  keys = Object.keys( m);
  for (var j=0; j < keys.length; j++) {
    listItemEl = document.createElement("li");
    listItemEl.textContent = m[keys[j]][displayProp];
    listEl.appendChild( listItemEl);
  }
},

For allowing to select multiple authors to be associated with the currently edited book in the Create use case, a multiple selection list (a select element with multiple="multiple"), as shown in the HTML code below, is populated with the instances of the associated object type.

<section id="Book-C" class="UI-Page">
 <h1>Public Library: Create a new book record</h1>
 <form>
  ... 
  <div class="select-one">
   <label>Publisher: <select name="selectPublisher"></select></label>
  </div>
  <div class="select-many">
   <label>Authors: 
    <select name="selectAuthors" multiple="multiple"></select>
   </label>
  </div>
  ...
 </form>
</section>

The Create UI is set up by populating selection lists for selecting the authors and the publisher with the help of a utility method fillSelectWithOptions as shown in the following program listing:

pl.v.books.create = {
  setupUserInterface: function () {
    var formEl = document.querySelector("section#Book-C > form"),
        authorsSelectEl = formEl.selectAuthors,
        publisherSelectEl = formEl.selectPublisher,
        submitButton = formEl.commit;
    // define event handlers for form field input events
      ...
    // set up the (multiple) authors selection list
    util.fillSelectWithOptions( authorsSelectEl, 
        Author.instances, "authorId", {displayProp:"name"});
    // set up the publisher selection list
    util.fillSelectWithOptions( publisherSelectEl, 
        Publisher.instances, "name");
    ...
  },
  handleSaveButtonClickEvent: function () {
    ...
  }
};

When the user clicks the save button, all form control values, including the value of any single-select control, are copied to a corresponding field of the slots record, which is used as the argument for invoking the add method after all form fields have been checked for validity. Before invoking add, we first have to create (in the authorIdRefs slot) a list of author ID references from the selected options of the multiple authors selection list, as shown in the following program listing:

  handleSaveButtonClickEvent: function () {
    var i=0, 
        formEl = document.querySelector("section#Book-C > form"),
        selectedAuthorsOptions = formEl.selectAuthors.selectedOptions;
    var slots = {
        isbn: formEl.isbn.value, 
        title: formEl.title.value,
        year: formEl.year.value,
        authorIdRefs: [],
        publisher_id: formEl.selectPublisher.value
    };
    // check all input fields 
    ...
    // save the input data only if all of the form fields are valid
    if (formEl.checkValidity()) {
      // construct the list of author ID references
      for (i=0; i < selectedAuthorsOptions.length; i++) {
        slots.authorIdRefs.push( selectedAuthorsOptions[i].value);
      } 
      Book.add( slots);
    }
  }

The Update use case is discussed in the next section.

Unfortunately, the multiple-select control is not really usable for displaying and allowing to maintain the set of associated authors in realistic use cases where we have several hundreds or thousands of authors, because the way it renders the choice is visually too scattered. So we have to use a special multiple-choice widget that allows to add (and remove) objects to (and from) a list of associated objects, as discussed in Section 8. In order to show how this widget can replace the multiple-selection list discussed in the previous section, we use it now in the Update use case.

For allowing to maintain the set of authors associated with the currently edited book in the Update use case, a multiple-choice widget as shown in the HTML code below, is populated with the instances of the Author class.

<section id="Book-U" class="UI-Page">
  <h1>Public Library: Update a book record</h1>
  <form>
    ...
    <div class="select-one">
      <label>Publisher: <select name="selectPublisher"></select></label>
    </div>
    <div class="widget">
      <label for="updBookSelectAuthors">Authors: </label>
      <div class="MultiSelectionWidget" id="updBookSelectAuthors"></div>
    </div>
    ...
  </form>
</section>

The Update user interface is set up (in the setupUserInterface procedure shown below) by populating the selection list for selecting the book to be updated with the help of the utility method fillSelectWithOptions. The selection list for assigning a publisher and the multiple-choice widget for assigning the authors of a book are only populated (in handleSubmitButtonClickEvent) when a book to be updated has been chosen.

pl.v.books.update = {
  setupUserInterface: function () {
    var formEl = document.querySelector("section#Book-U > form"),
        bookSelectEl = formEl.selectBook,
        submitButton = formEl.commit;
    // set up the book selection list
    util.fillSelectWithOptions( bookSelectEl, Book.instances, 
        "isbn", {displayProp:"title"});
    bookSelectEl.addEventListener("change", this.handleBookSelectChangeEvent);
    ... 
    // define event handler for save button click events    
    submitButton.addEventListener("click", this.handleSaveButtonClickEvent);
    // define event handler for neutralizing the submit event and reseting the form
    formEl.addEventListener( 'submit', function (e) {
      var authorsSelWidget = document.querySelector(
              "section#Book-U > form .MultiSelectionWidget");
      e.preventDefault();
      authorsSelWidget.innerHTML = "";
      formEl.reset();
    });
    document.getElementById("Book-M").style.display = "none";
    document.getElementById("Book-U").style.display = "block";
    formEl.reset();
  },

When a book to be updated has been chosen, the form input fields isbn, title and year, and the select control for updating the publisher, are assigned corresponding values from the chosen book, and the associated authors selection widget is set up:

  handleBookSelectChangeEvent: function () {
    var formEl = document.querySelector("section#Book-U > form"),
        authorsSelWidget = formEl.querySelector(
            ".MultiSelectionWidget"),
        publisherSelectEl = formEl.selectPublisher,
        key = formEl.selectBook.value,
        book=null;
    if (key !== "") {
      book = Book.instances[key];
      formEl.isbn.value = book.isbn;
      formEl.title.value = book.title;
      formEl.year.value = book.year;
      // set up a multiple-choice widget for associated authors
      util.createMultiSelectionWidget( authorsSelWidget, 
          book.authors, Author.instances, "authorId", "name");
      // set up the associated publisher selection list
      util.fillSelectWithOptions( publisherSelectEl, 
          Publisher.instances, "name");
      // assign associated publisher to index of select element  
      formEl.selectPublisher.selectedIndex = 
          (book.publisher) ? book.publisher.index : 0;
    } else {
      formEl.reset();
      formEl.selectPublisher.selectedIndex = 0;
    }
  },

When the user, after updating some values, finally clicks the save button, all form control values, including the value of the single-select control for assigning a publisher, are copied to corresponding slots in a slots record variable, which is used as the argument for invoking the update method after all values have been checked for validity. Before invoking update, a list of ID references to authors to be added, and another list of ID references to authors to be removed, is created (in the authorIdRefsToAdd and authorIdRefsToRemove slots) from the updates that have been recorded in the associated authors selection widget with the help of classList values, as shown in the following program listing:

  handleSaveButtonClickEvent: function () {
    var assocAuthorListItemEl=null, i=0,
        authorIdRefsToAdd=[], authorIdRefsToRemove=[],
        formEl = document.querySelector("section#Book-U > form"),
        selectBookEl = formEl.selectBook,
        authorsSelWidget = formEl.querySelector(
            ".MultiChoiceWidget"),
        authorsAssocListEl = authorsSelWidget.firstElementChild;
    var slots = { isbn: formEl.isbn.value, 
          title: formEl.title.value,
          year: formEl.year.value,
          publisher_id: formEl.selectPublisher.value
        };
    // commit the update only if all form field values are valid
    if (formEl.checkValidity()) {
      // construct authorIdRefs-ToAdd/ToRemove lists 
      for (i=0; i < authorsAssocListEl.children.length; i++) {
        assocAuthorListItemEl = authorsAssocListEl.children[i]; 
        if (assocAuthorListItemEl.classList.contains("removed")) {
          authorIdRefsToRemove.push( 
              assocAuthorListItemEl.getAttribute("data-value"));          
        }
        if (assocAuthorListItemEl.classList.contains("added")) {
          authorIdRefsToAdd.push( 
              assocAuthorListItemEl.getAttribute("data-value"));          
        }
      } 
      // if the add/remove list is non-empty create a slot
      if (authorIdRefsToRemove.length > 0) {
        slots.authorIdRefsToRemove = authorIdRefsToRemove;
      }
      if (authorIdRefsToAdd.length > 0) {
        slots.authorIdRefsToAdd = authorIdRefsToAdd;
      }
      Book.update( slots);
      // update the book selection list's option element
      selectBookEl.options[selectBookEl.selectedIndex].text = 
          slots.title;
    }
  }