Chapter 13. Implementing Bidirectional Associations with Plain JS

Table of Contents

1. Make a JavaScript Class Model
2. Write the Model Code
2.1. New issues
2.2. Coding Summary
2.3. Code each class of the JS class model
2.4. Code the set methods of single-valued properties
2.5. Code the add and remove operations
2.6. Suppress the storage of the values of derived properties
2.7. Take care of deletion dependencies
3. Exploit Inverse Reference Properties in the User Interface
3.1. Show published books in Retrieve/List All publishers
4. Quiz Questions
4.1. Question 1: Adding references
4.2. Question 2: Maintaining a pair of mutually inverse reference properties
4.3. Question 3: Making a JS class model

In this chapter, we show

  1. how to derive a JS class model from an OO class model with derived inverse reference properties,

  2. how to code the JS class model in the form of JS model classes,

  3. how to write the view and controller code based on the model code.

1. Make a JavaScript Class Model

The starting point for making our JS class model is an OO class model with derived inverse reference properties like the one discussed above, which we present here again, for convenience:

Notice that the model contains two derived inverse reference properties: Publisher::/publishedBooks and Author::/authoredBooks. Each of them is linked to a master property, from which it is derived. Consequently, each of them represents a pair of mutually inverse reference properties corresponding to a bidirectional association.

Compared to making JS class models with unidirectional associations, the only new issue is:

  1. Add a «get» stereotype to all derived inverse reference properties, implying that they have an implicit getter, but no setter. They are programatically set whenever their inverse master reference property is updated.

This concerns the two derived inverse reference properties Publisher::/publishedBooks and Author::/authoredBooks. Thus, we get the following JavaScript class model: