Working with ojModule’s ViewModel Life Cycle

The ojModule binding provides life cycle listeners that allow you to specify actions to take place at defined places in the ViewModel’s life cycle. For example, you can specify actions to take place when the ViewModel is about to be used for the View transition, after its associated View is inserted into the document DOM, and after its View and ViewModel are inactive.

The following table lists the available methods with a description of their usage.

Method Name Description

handleActivated(info)

Use to perform tasks when the View is about to use the ViewModel. This method is typically used to fetch data before the View transitions.

For an example, see the Oracle JET Cookbook at: Dynamic Data Fetch.

handleAttached(info)

Use to perform tasks after the View is inserted into the DOM.

You can find an example that generates a dynamic header with an updatable button region at: Dynamic Header Buttons.

handleBindingsApplied(info)

Use to perform tasks after the bindings are applied on the View.

handleDeactivated(info)

Use to perform tasks after the View and ViewModel become inactive.

handleDetached(info)

Use to perform tasks after the View is removed from the DOM.

handleTransitionCompleted(info)

Use to perform tasks after a new View is complete, including any possible animation between the old and new View.

dispose(info)

Use to perform cleanup tasks before all binding references to the ViewModel are released.

You can also find examples for using the ojModule life cycle methods in some of the Oracle JET templates. For example, the navBar template, available as a template when you Scaffold a Hybrid Mobile Application with Yeoman, defines an event listener when the DashboardViewModel is attached and detached.

function DashboardViewModel() {
  var self = this;
  /*
   * Optional ViewModel method invoked when this ViewModel is about to be
   * used for the View transition.  The application can put data fetch logic
    * here that can return a Promise which will delay the handleAttached function
    * call below until the Promise is resolved.
    */
  self.handleActivated = function(info) {
    // Implement if needed
  };

  /*
   * Optional ViewModel method invoked after the View is inserted into the
   * document DOM.  The application can put logic that requires the DOM being
   * attached here.
   */
  self.handleAttached = function() {
    document.addEventListener('deviceready', onDeviceReady);
  };

  /*
   * Optional ViewModel method invoked after the View is removed from the
   * document DOM.
   */
  self.handleDetached = function() {
    document.removeEventListener('deviceready', onDeviceReady);
  };

  function onDeviceReady() {
    // Will execute when device is ready, or immediately if the device is already ready.
  }
  }

  /*
   * Returns a constructor for the ViewModel so that the ViewModel is constrcuted
   * each time the view is displayed.  Return an instance of the ViewModel if
   * only one instance of the ViewModel is needed.
   */
  return new DashboardViewModel;
}

For more information about ojModule, see ojModule.