Serenity UI Class, Observable and Model

10 Jul 2017 21:24
Tags class model observable serenity-ui

Back to list of posts


Serenity UI is a JavaScript widget framework built on industry standard open source libraries. Serenity UI extends the jQuery UI widget library with new widgets based on the jQuery UI widget framework. In addition to widgets, the Serenity UI framework also provides a Class, Observable, Model, DataSource and Router to improve the overall experience of developing web applications. This article focuses on the Class, Observable and Model.


Serenity UI has a serenity.Class module that is used to define JavaScript classes through the base function. Classes created from the Class module support inheritance. The Class module provides support for a class constructor, attributes, properties, and functions. The Class module also adds an extend function so that the class can be inherited.

The Serenity UI Class Fiddle demonstrates the creation of a Person class using the serenity.Class module.

The Person class has 2 attributes, firstName and lastName. The constructor has 2 parameters of firstName and lastName. The Person class has a fullName property with a getter function that returns the firstName and lastName concatentated together. Finally, the Person class has a greeting function that demonstrates the use of the fullName property.


The serenity.Observable class is derived from serenity.Class and provides support for events. The Observable class has an event member variable that is used to define the events for the class. The Observable class has 4 functions:

  • once - attach a handler to an event to be executed once.
  • bind - attach a handler to an event to be executed.
  • unbind - remove a handler to an event.
  • trigger - execute all event handlers associated with an event.

The Serenity UI Observable Fiddle demonstrates the creation of a Person class using the serenity.Observable class.

Since the Person class extends the Observable class, the Person constructor has to call the constructor for the Observable class. The Person class has an events attribute that is an array of events available to the class. A nameChange event is defined that will be triggered when the fullName is set in the fullName property. In the fullName property, setter function, the nameChange event is triggered with the name before the change and the name after the change.

After the Person class is instantiated, the person instance binds the nameChange event to an event handler and shows the fullName before and after the change. Next the person.fullName is set to a new name which triggers the nameChange event.


The serenity.Model class is derived from serenity.Observable and provides support for tracking changes, committing changes or rolling back changes. It also has a change event that is triggered when an attribute or property is set using the Model.set function. The Model constructor also accepts a JSON object for initializing the attributes of a class.

The Serenity UI Model Fiddle demonstrates the creation of a Person class using the serenity.Model class.

The constructor for the Model class accepts a parameter of values, a JSON object with the values to initialize the model. Each attribute in the JSON object would need to have a matching attribute in the Model. In the fullName property setter function, the firstName and lastName are set using the Model.set function so that the dirty flag is set and the change event is raised.

When the Person class is instantiated, the firstName and lastName is passed into the constructor in a JSON object. The person instance binds the change event to an event handler and shows the property that was changed as well as the value before it was changed and the current value. The person.fullName is set which triggers the change event. The rollback function is called to set the attributes of the person instance to the values at the time that the person was instantiated. The commit function could have also been called to commit the changes to the person. If additional changes were made to the person and the rollback function were called, the attributes would be set to the values at the time of the last commit.


Comments: 0

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License