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 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 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 1.8 below, where the uniqueness constraint of the reference property chairedCommittee is expressed by the {key} property modifier.

For the case of a unidirectional one-to-many association, Figure 1.9 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.

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 1.6 with a functional reference property publisher in the class Book, resulting in the OO class model shown in Figure 1.10.

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 defining its multiplicity to be 0..1.

The meaning of this OO class model and its reference property publisher can be illustrated by a sample data population for the two model classes Book and Publisher as presented in the following tables:

Notice that the values of the "Publisher" column of the Book table are unique names that reference a row of the Publisher table. The "Publisher" column may not have a value for certain rows due to the fact that the corresponding reference property publisher is optional.

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

The meaning of this OO class model and its reference properties Book::publisher and Book::authors can be illustrated by sample data populations for the three model classes:

After the platform-independent OO class model has been completed, one or more platform-specific implementation models, for a choice of specific implementation platforms, can be derived from it. Examples of types of platform-specific implementation models are JS class models, Java Entity class models and SQL table models.

A platform-specific implementation 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 implementation model, and 2) how to code this model.

What does it mean to say that an association is "one-to-one"? It means that it is (select one):

A referential integrity constraint for a reference property p with domain class C and range class D has to be checked whenever (select one or many):

A unidirectional binary association is functional if and only if (select one):

Assume that we have an object type B with a standard identifier attribute id and an object type A with an ID reference attribute b_id referencing B::id. Further, assume that there is an object b of type B with b.id = 11 and an object a of type A referencing b with a.b_id = 11. Which of the following statements are correct? Select one or many:

Which of the following statements about a single-valued reference property p and how it should be rendered in a web user interface by a suitable form control are correct? Select one or many:

Which of the following terms can be used for expressing that an association is neither functional nor inverse functional?

O one-to-one O one-to-many O many-to-one O many-to-many

Code each class of the JS class model as a JS class with implicit getters and setters:

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

Each class C of the JS class model is coded as a JS class with the same name C and a constructor having a single record parameter, which specifies a field for each (non-derived) property of the class. The range of these properties can be indicated in a comment. In the case of a reference property the range is another model class.

In the constructor body, we assign the fields of the record parameter to corresponding properties. These property assignments invoke the corresponding setter methods.

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

class Publisher {
  constructor ({name, address}) {
    this.name = name;  // string
    this.address = address;  // string
  }
  ...
};

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 an empty map {}. For instance, in the case of the model class Publisher, we define:

Publisher.instances = {};

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

class Book {
  constructor ({isbn, title, year, authors, authorIdRefs, 
      publisher, publisher_id}) {
    this.isbn = isbn;  // string
    this.title = title;  // string
    this.year = year;  // integer
    this.authors = authors || authorIdRefs;  // Array
    if (publisher || publisher_id) {
      this.publisher = publisher || publisher_id;  // ref|string
    }
  }
  ...
}

Notice that the Book constructor can be invoked either with object references authors and publisher or with ID references authorIdRefs and publisher_id (the type hint "ref|string" means that the property's range is either an object reference or a string). This approach makes using the Book constructor more flexible and more robust.

Take care that all constraints of a property as specified in the JS 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 module file lib/errorTypes.mjs.

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();
      }
    }
  }
  static checkNameAsId(n) {...}
  ...
}

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 validationResult = Publisher.checkName(n);
  if ((validationResult instanceof NoConstraintViolation)) {
    if (!n) {
      return new MandatoryValueConstraintViolation(
          "A publisher name is required!");
    } else if (Publisher.instances[n]) {
      return UniquenessConstraintViolation(
          "There is already a publisher record with this name!");
    }
  } 
  return validationResult;
}

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 validationResult = Publisher.checkName(n);
  if ((validationResult instanceof NoConstraintViolation) &&
      n !== undefined) {
    if (!Publisher.instances[n]) {
      validationResult = new ReferentialIntegrityConstraintViolation(
          "There is no publisher record with this name!");
    }
  }
  return validationResult;
}

The condition !Publisher.instances[n] checks if there is no publisher object with the given name n, and then creates a validationResult object as an instance of the exception class ReferentialIntegrityConstraintViolation. The Publisher.checkNameAsIdRef function is called by the Book.checkPublisher function:

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

In the setters, the corresponding check function is called 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) {
    if (!p) {  // unset publisher
      delete this._publisher;
    } else {
      // p can be an ID reference or an object reference
      const publisher_id = (typeof p !== "object") ? p : p.name;
      const validationResult = Book.checkPublisher( publisher_id);
      if (validationResult instanceof NoConstraintViolation) {
        // create the new publisher reference
        this._publisher = Publisher.instances[ publisher_id];
      } else {
        throw validationResult;
      }
    }
  }
  ...
}

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 record of a publisher p, we have to choose between

Assuming that books do not existentially depend on their publishers, we choose the second option. This is shown in the following code of the Publisher.destroy method where for all concerned book objects the property book.publisher is cleared (by deleting its property-value slot):

Publisher.destroy = function (name) {
  // delete all references to this publisher in book objects
  for (const key of Object.keys( Book.instances)) {
    const book = Book.instances[key];
    if (book.publisher.name === name) {
      delete book._publisher;  // delete the proporty-value slot
    }
  }
  // delete the publisher object
  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 Book::toString() has to show a human-readable identifier of the referenced object, like this.publisher.name:

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 object-to-storage conversion function Book::toJSON(), which is automatically invoked by the built-in JSON.stringify function, converts typed JS objects with object references to corresponding (untyped) record objects with ID references. This includes deleting the underscore prefix for obtaining the corresponding record field name:

toJSON() {
  var rec = {};
  for (const p of Object.keys( this)) {
    // copy only property slots with underscore prefix
    if (p.charAt(0) !== "_") continue;
    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];
    }
  }
  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.

<section id="Book-M" class="UI-Page">
  <h1>Manage book data</h1>
  <ul class="menu">
	<li><button type="button" id="RetrieveAndListAll">Retrieve/list 
            all book records</button></li>
	<li><button type="button" id="Create">Create 
          a new book record</button></li>
	<li><button type="button" id="Update">Update 
            a book record</button></li>
	<li><button type="button" id="Delete">Delete 
            a book record</button></li>
  </ul>
  <div class="button"><a href="index.html">Back to Main menu</a></div>
</section>

document.getElementById("RetrieveAndListAll")
    .addEventListener("click", function () {
  document.getElementById("Book-M").style.display = "none";
  document.getElementById("Book-R").style.display = "block";
  ...  // set up the UI for Retrieve/list all
});

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

const tableBodyEl = document.
      querySelector("section#Book-R > table > tbody");
tableBodyEl.innerHTML = "";  // drop old content
for (const key of Object.keys( Book.instances)) {
  const book = Book.instances[key];
  const row = tableBodyEl.insertRow();
  row.insertCell().textContent = book.isbn;
  row.insertCell().textContent = book.title;
  row.insertCell().textContent = book.year;
  // if the book has a publisher, show its name
  row.insertCell().textContent =
    book.publisher ? book.publisher.name : "";
}

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 associated objects in the Create and Update user interfaces, a selection list (i.e., a HTML 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 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 UI is set up by populating a selection list for selecting the publisher with the help of a utility method fillSelectWithOptions as shown in the following program listing:

const createFormEl = document.querySelector("section#Book-C > form");
const selectPublisherEl = createFormEl.selectPublisher;
document.getElementById("Create").addEventListener("click", function () {
  document.getElementById("Book-M").style.display = "none";
  document.getElementById("Book-C").style.display = "block";
  // set up a single selection list for selecting a publisher
  fillSelectWithOptions( selectPublisherEl, Publisher.instances, "name");
  createFormEl.reset();
});
// set up event handlers for responsive constraint validation
...
// handle Save button click events
createFormEl["commit"].addEventListener("click", function () {
  ...
});

When the user pushes the Save button, all form control values, including the value of the select field, are copied to a slots record, 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:

// handle Save button click events
createFormEl["commit"].addEventListener("click", function () {
  const slots = {
    isbn: createFormEl.isbn.value,
    title: createFormEl.title.value,
    year: createFormEl.year.value,
    publisher_id: createFormEl.selectPublisher.value
  };
  // check all input fields and show error messages
  createFormEl.isbn.setCustomValidity(
      Book.checkIsbnAsId( slots.isbn).message);
  // save the input data only if all form fields are valid
  if (createFormEl.checkValidity()) {
    Book.add( slots);
  }
});

The code for setting up the Update user interface is similar.

Consider the single-valued reference property Committee::chair, which holds a reference to an instance of the class ClubMember. Which of the following JS code fragments represents the preferred implementation of the setter for this property? Select one:

Making the assumption that books existentially depend on their publishers, implying a CASCADE deletion policy, which of the following Publisher.destroy methods correctly implements the implied deletion policy? Select one:

Consider the following OO class model:

Which is the correct JS class model for the Committee class derived from the above model? Select one:

Code each class of the JS class model as an ES6 class with implicit getters and setters:

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

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) {
  // a can be an ID reference or an object reference
  const author_id = (typeof a !== "object") ? parseInt( a) : a.authorId;
  const validationResult = Book.checkAuthor( author_id);
  if (validationResult instanceof NoConstraintViolation) {
    // add the new author reference
    const key = String( author_id);
    this._authors[key] = Author.instances[key];
  } else {
    throw validationResult;
  }
}

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) {
  // a can be an ID reference or an object reference
  const author_id = (typeof a !== "object") ? 
      parseInt( a) : a.authorId;
  const validationResult = Book.checkAuthor( author_id);
  if (validationResult instanceof NoConstraintViolation) {
    // delete the author reference
    delete this._authors[author_id];
  } else {
    throw validationResult;
  }
}

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

set authors( a) {
  this._authors = {};
  if (Array.isArray(a)) {  // array of IdRefs
    for (let idRef of a) {
      this.addAuthor( idRef);
    }
  } else {  // map of IdRefs to object references
    for (let idRef of Object.keys( a)) {
      this.addAuthor( a[idRef]);
    }
  }
}

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

For simplicity, we go for the second option. This is shown in the following code of the static Author.destroy method where for all concerned book objects the author reference book.authors[authorId] is dropped:

Author.destroy = function (authorId) {
  const author = Author.instances[authorId];
  // delete all dependent book records
  for (const isbn of Object.keys( Book.instances)) {
    const book = Book.instances[isbn];
    if (book.authors[authorId]) delete book.authors[authorId];
  }
  // delete the author object
  delete Author.instances[authorId];
  console.log("Author " + author.name + " deleted.");
};

We need two serialization functions:

In both cases, internal object references are converted to ID references.

The Book::toString() function creates a string representation that typically contains the relevant properties only. The simplest method for showing a set of associated objects, like the authors of a book, is creating a comma-separated list of IDs with Object.keys( this.authors).join(",") as in the following program listing:

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 object-to-storage conversion function Book::toJSON(), which is automatically invoked by JavaScript's built-in JSON.stringify function when it encounters an object of type Book, converts typed JS objects with object references to corresponding (untyped) record objects with ID references. This includes deleting the underscore prefix for obtaining the corresponding record field name:

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

For showing information about the authors of a book in the view table of the Retrieve/List All user interface, the corresponding cell in the HTML table is filled (in v/books.mjs) with a list of the names of all authors with the help of the utility function createListFromMap:

const tableBodyEl = document.querySelector("section#Book-R>table>tbody");
tableBodyEl.innerHTML = "";  // drop old content
for (const key of Object.keys( Book.instances)) {
  const book = Book.instances[key];
  // create list of authors for this book
  const authListEl = createListFromMap( book.authors, "name");
  const row = tableBodyEl.insertRow();
  row.insertCell().textContent = book.isbn;
  row.insertCell().textContent = book.title;
  row.insertCell().textContent = book.year;
  row.insertCell().appendChild( authListEl);
  // if the book has a publisher, show its name
  row.insertCell().textContent =
      book.publisher ? book.publisher.name : "";
}

The utility function createListFromMap (in lib/util.mjs) has the following code:

function createListFromMap( entityTbl, displayProp) {
  const listEl = document.createElement("ul");
  // delete old contents
  listEl.innerHTML = "";
  // create list items from object property values
  for (const key of Object.keys( entityTbl)) {
    const listItemEl = document.createElement("li");
    listItemEl.textContent = entityTbl[key][displayProp];
    listEl.appendChild( listItemEl);
  }
  return listEl;
}

For allowing to select multiple authors to be associated with the currently edited book in the Create user interface, a multiple selection list (a select element with the multiple attribute set to "multiple"), as shown in the HTML code below (from books.html), 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 (from v/books.mjs):

const createFormEl = document.querySelector("section#Book-C > form"),
      selectAuthorsEl = createFormEl["selectAuthors"],
      selectPublisherEl = createFormEl["selectPublisher"];
document.getElementById("create").addEventListener("click", function () {
  // set up a single selection list for selecting a publisher
  fillSelectWithOptions( selectPublisherEl, Publisher.instances, "name");
  // set up a multiple selection list for selecting authors
  fillSelectWithOptions( selectAuthorsEl, Author.instances,
      "authorId", {displayProp: "name"});
  document.getElementById("Book-M").style.display = "none";
  document.getElementById("Book-C").style.display = "block";
  createFormEl.reset();
});
// set up event handlers for responsive constraint validation
...
// handle Save button click events
createFormEl["commit"].addEventListener("click", 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:

// handle Save button click events
createFormEl["commit"].addEventListener("click", function () {
  const slots = {
    isbn: createFormEl["isbn"].value,
    title: createFormEl["title"].value,
    year: createFormEl["year"].value,
    authorIdRefs: [],
    publisher_id: createFormEl["selectPublisher"].value
  };
  // check all input fields and show validation error messages
  ...
  // get the list of selected authors
  const selAuthOptions = createFormEl["selectAuthors"].selectedOptions;
  // check the mandatory value constraint for authors
  createFormEl["selectAuthors"].setCustomValidity(
      selAuthOptions.length > 0 ? "" : "No author selected!");
  // save the input data only if all form fields are valid
  if (createFormEl.checkValidity()) {
    // construct a list of author ID references
    for (const opt of selAuthOptions) {
      slots.authorIdRefs.push( opt.value);
    }
    Book.add( slots);
  }
});

The Update use case is discussed in the next section.

Unfortunately, HTML's 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 in a large list to be scrolled is visually too scattered, violating general usability requirements. So we have to use a special multi-selection 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 multi-selection 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>Select book: <select name="selectBook"></select></label>
    </div>
    ...
    <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 a section of v/books.mjs) by populating the selection list for selecting the book to be updated with the help of the utility method fillSelectWithOptions.

const updateFormEl = document.querySelector("section#Book-U > form"),
      updSelBookEl = updateFormEl["selectBook"];
document.getElementById("update").addEventListener("click", function () {
  document.getElementById("Book-M").style.display = "none";
  document.getElementById("Book-U").style.display = "block";
  // set up the book selection list
  fillSelectWithOptions( updSelBookEl, Book.instances,
      "isbn", {displayProp: "title"});
  updateFormEl.reset();
});

The selection list for assigning a publisher and the multi-selection widget for assigning the authors of a book are only populated after a book to be updated has been chosen in the books selection list. The following event handler that listens to change events on the select element with name "selectBook" takes care of this:

updSelBookEl.addEventListener("change", function () {
  const saveButton = updateFormEl["commit"],
    selectAuthorsWidget = updateFormEl.querySelector(".MultiSelectionWidget"),
    selectPublisherEl = updateFormEl["selectPublisher"],
    isbn = updateFormEl["selectBook"].value;
  if (isbn) {
    const book = Book.instances[isbn];
    updateFormEl["isbn"].value = book.isbn;
    updateFormEl["title"].value = book.title;
    updateFormEl["year"].value = book.year;
    // set up the associated publisher selection list
    fillSelectWithOptions( selectPublisherEl, Publisher.instances, "name");
    // set up the associated authors selection widget
    createMultiSelectionWidget( selectAuthorsWidget, book.authors,
        Author.instances, "authorId", "name", 1);  // minCard=1
    // assign associated publisher as the selected option to select element
    if (book.publisher) {
      updateFormEl["selectPublisher"].value = book.publisher.name;
    }
    saveButton.disabled = false;
  } else {
    updateFormEl.reset();
    updateFormEl["selectPublisher"].selectedIndex = 0;
    selectAuthorsWidget.innerHTML = "";
    saveButton.disabled = true;
  }
});

When a book to be updated has been chosen, the output field isbn and the input fields title and year, as well as the selection field for updating the publisher, are assigned corresponding values from the chosen book, and the associated authors selection widget is set up with the help of the utility procedure createMultiSelectionWidget.

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 Book.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 "added" and "removed" as values of the corresponding list item's class attribute, as shown in the following program listing:

updateFormEl["commit"].addEventListener("click", function () {
  const bookIdRef = updSelBookEl.value,
    selectAuthorsWidget = updateFormEl.querySelector(".MultiSelectionWidget"),
    selectedAuthorsListEl = selectAuthorsWidget.firstElementChild;
  if (!bookIdRef) return;
  const slots = {
    isbn: updateFormEl["isbn"].value,
    title: updateFormEl["title"].value,
    year: updateFormEl["year"].value,
    publisher_id: updateFormEl["selectPublisher"].value
  };
  // add event listeners for responsive validation
  ...
  // commit the update only if all form field values are valid
  if (updateFormEl.checkValidity()) {
    // construct authorIdRefs-ToAdd/ToRemove lists
    const authorIdRefsToAdd=[], authorIdRefsToRemove=[];
    for (const authorItemEl of selectedAuthorsListEl.children) {
      if (authorItemEl.classList.contains("removed")) {
        authorIdRefsToRemove.push( authorItemEl.getAttribute("data-value"));
      }
      if (authorItemEl.classList.contains("added")) {
        authorIdRefsToAdd.push( authorItemEl.getAttribute("data-value"));
      }
    }
    // if the add/remove list is non-empty, create a corresponding 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
    updSelBookEl.options[updSelBookEl.selectedIndex].text = slots.title;
    // drop widget content
    selectAuthorsWidget.innerHTML = "";
  }
});

You can run the example app from our server and download it as a ZIP archive file.

Which of the following statements about implementing collection-valued properties in JS are correct? Select one or more:

Making the assumption that books existentially depend on their authors, implying a CASCADE deletion policy, which of the following Author.destroy methods correctly implements the implied deletion policy? Select one:

Which is the correct JS class model for the Committee class derived from the given OO class model?

Select one: