Chapter 16. Implementing Bidirectional Associations with Plain JavaScript

Table of Contents

1. Make a JavaScript Data Model
2. Write the Model Code
2.1. New issues
2.2. Summary
2.3. Encode each class of the JavaScript data model as a constructor function
2.4. Encode the property checks
2.5. Encode the setter operations
2.6. Encode the add and remove operations
2.7. Take care of deletion dependencies
3. Exploiting Derived Inverse Reference Properties in the User Interface
3.1. Show information about published books in the List Publishers use case

In this chapter of our tutorial, we show

  1. how to derive a JavaScript data model from an association-free information design model with derived inverse reference properties,

  2. how to encode the JavaScript data model in the form of JavaScript model classes,

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

1. Make a JavaScript Data Model

The starting point for making our JavaScript data model is an association-free information design model with derived inverse reference properties like the following one:

Notice that there are two derived inverse reference properties: Publisher::/publishedBooks and Author::/authoredBooks.

The meaning of the design model and its reference properties publisher and authors can be illustrated by a sample data population for the three model classes:

Table 16.1. Sample data for Publisher

Name Address Published books
Bantam Books New York, USA 0553345842
Basic Books New York, USA 0465030793

Table 16.2. Sample data for Book

ISBN Title Year Authors Publisher
0553345842 The Mind's I 1982 1, 2 Bantam Books
1463794762 The Critique of Pure Reason 2011 3
1928565379 The Critique of Practical Reason 2009 3
0465030793 I Am A Strange Loop 2000 2 Basic Books

Table 16.3. Sample data for Author

Author ID Name Authored books
1 Daniel Dennett 0553345842
2 Douglas Hofstadter 0553345842, 0465030793
3 Immanuel Kant 1463794762, 1928565379

We now show how to derive a JavaScript data model from the design model in three steps.

  1. Create a check operation for each non-derived property. This step has been discussed in detail in the previous parts of the tutorial (about data validation and about unidirectional associations).

  2. Create a set operation for each non-derived single-valued property. In the setter, the corresponding check operation is invoked and the property is only set, if the check does not detect any constraint violation.

  3. Create an add, a remove and a set operation for each non-derived multi-valued property.

This leads to the following JavaScript data model classes Publisher and Author. Notice that we don't show the model class Book, since it is the same as in the data model for the unidirectional association app discussed in the previous Part of our tutorial.

Figure 16.1. The JavaScript data model without the class Book