Search⌘ K
AI Features
Home
Courses
Building Front-End Web Applications with Plain JavaScript

Model Code

Explore how to implement bidirectional associations between JavaScript classes by coding setters, add and remove operations for linked properties, managing derived properties during storage, and handling deletion dependencies. This lesson helps you build coherent object interactions in your front-end models.

We'll cover the following...

Code each class of the JS class model

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

Javascript (babel-node)
class Publisher {
  constructor({ name, address }) {
    this.name = name;
    this.address = address;
    // derived inverse reference property (inverse of Book::publisher)
    this._publishedBooks = {}; // initialize as an empty map
  }
  get name() {... }
  static checkName(n) {... }
  static checkNameAsId(n) {... }
  static checkNameAsIdRef(n) {... }
  set name(n) {... }
  get address() {... }
  static checkAddress(a) {... }
  set address(a) {... }
  toString() {... }
  toRecord() {... }
}

We add the derived multivalued reference property publishedBooks, but we don’t assign it in the constructor function. This is because it’s a read-only property that’s assigned implicitly when its inverse leader reference property Book::publisher is assigned.

Code the set methods of single-valued properties

Any setter for a reference property that’s coupled to a derived inverse reference property also needs to assign, add, or remove inverse references to and from the corresponding collection value of the inverse reference property. An example of such a setter is publisher in the Book class:

Javascript (babel-node)
set publisher(p) {
  if (!p) { // the publisher reference is to be deleted
    // delete the inverse reference in Publisher::publishedBooks
    delete this._publisher.publishedBooks[this._isbn];
    // unset the publisher property
    delete this._publisher;
  } else {
    // p can be an ID reference or an object reference
    const publisher_id = (typeof p !== "object") ? p : p.name;
    const constraintViolation = Book.checkPublisher(publisher_id);
    if (constraintViolation instanceof NoConstraintViolation) {
      if (this._publisher) {
        // delete the inverse reference in Publisher::publishedBooks
        delete this._publisher.publishedBooks[this._isbn];
      }
      // create the new publisher reference
      this._publisher = Publisher.instances[publisher_id];
      // add the new inverse reference to Publisher::publishedBooks
      this._publisher.publishedBooks[this._isbn] = this;
    } else {
      throw constraintViolation;
    }
  }
}

For any multivalued reference property that’s coupled to a ...