Two-Way Data Binding JET Components with Knockout

Hugh Zhang-Oracle

Earlier this week, @Geertjan-Oracle posted two articles about data binding JET components in an AngularJS application without Knockout:

• https://blogs.oracle.com/geertjan/entry/oracle_jet_meets_angularjs
• https://blogs.oracle.com/geertjan/entry/data_binding_with_oracle_jet

Today I'd like to show some of the benefits of using the Knockout bindings. Starting with the JET QuickStart app, we'll create a text element, an ojInputNumber, and an ojStatusMeterGauge component:

I've modified the home.tmpl.html page to contain the following:

<div>
  <b>Value:</b>
  <span data-bind="text: value"/>
</div>

<input data-bind="ojComponent: {
  component: 'ojInputNumber', value: value}"/>

<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  value: value, min: 0, max: 100,
  readOnly: false, step: 1,
  orientation: 'circular', metricLabel: {rendered: 'on'}, plotArea: {rendered: 'on'},
  thresholds: [{min: 33}, {max: 67}, {}]
}" style="width: 75px; height: 75px;">
</div>

Then I've modified home.js to contain the following. It's important to require the ojinputnumber and ojgauge in the define call, since that tells us to load the component libraries.

define(['ojs/ojcore' , 'knockout', 'ojs/ojinputnumber','ojs/ojgauge'], function(oj, ko) {
  function mainContentViewModel() {
    var self = this;

    // The observable defining the value for the components.
    self.value = ko.observable(60);
  }

  return mainContentViewModel;
});

All of the components will be updated whenever the observable's value changes. Knockout's two-way binding also allows our components to write to the observable, automatically updating the other components as well. Change the value on the ojInputNumber or ojStatusMeterGauge to see this in action:

As described on Geertjan's blog, the same can be accomplished using optionChange listeners and our jQuery UI APIs, and one of our favorite things about JET is that we're free to choose either approach. Happy coding