Oracle JET supports binding text nodes to variables using the oj-bind-text element and by importing the ojknockout module.

The oj-bind-text element is removed from the DOM after binding is applied. For example, the following code sample shows an oj-input-text and an oj-button with a text node that are both bound to the buttonLabel variable. When the input text is updated, the button text is automatically updated as well.

<div id='button-container'>
   <oj-button id='button1'>
      <span><oj-bind-text value="[[buttonLabel]]"></oj-bind-text></span>
   </oj-button>
   <br><br>
   <oj-label for="text-input">Update Button Label:</oj-label>
   <oj-input-text id="text-input" value="{{buttonLabel}}"></oj-input-text>
</div>

The script to create the viewModel for this example is shown below.

import * as ko from "knockout";
import "ojs/ojinputtext";
import "ojs/ojlabel";
import "ojs/ojbutton";

class ButtonModel {
  buttonLabel: ko.Observable<string>;

  constructor() {
    this.buttonLabel = ko.observable("My Button");
  }
}

export = ButtonModel;

define(["knockout", "ojs/ojknockout", "ojs/ojbutton",
                       "ojs/ojinputtext", "ojs/ojlabel"], 

  function (ko) {

    function ButtonModel() {
      this.buttonLabel = ko.observable("My Button");
    }

    return ButtonModel;

  });

The figure below shows the output for the code sample.

The Oracle JET Cookbook contains the complete example used in this section. See Text Binding.

Oracle JET supports one-way attribute data binding for attributes on any HTML element by prefixing ":" to the attribute name and by importing the ojknockout module.

To use an HTML attribute in an HTML or JET element, prefix a colon to it. JET component–specific attributes do not need the prefix.

The following code sample shows two JET elements and two HTML elements that use both the prefixed and non-prefixed syntax. Since the label and input elements are native HTML elements, all their data bound attributes should use the colon prefixing. The oj-label and oj-input-text elements use the prefix only for native HTML element attributes and the non-prefixed syntax for component-specific attributes.

<div id="demo-container">
  <oj-label for="[[inputId1]]">oj-input-text element</oj-label>
  <oj-input-text :id="[[inputId1]]" value="{{value}}"></oj-input-text>
  <br><br>
  <label :for="[[inputId2]]">HTML input element</label>
  <br>
  <input :id="[[inputId2]]" :value="[[value]]" style="width:100%;max-width:18em"/>
</div>

The script to create the viewModel for this example is shown below.

import * as ko from "knockout";
import "ojs/ojinputtext";
import "ojs/ojlabel";
import 'ojs/ojknockout';

class ViewModel {
  inputId1: ko.Observable<string>;
  inputId2: ko.Observable<string>;
  value: ko.Observable<string>;

  constructor() {
    this.inputId1 = ko.observable("text-input1");
    this.inputId2 = ko.observable("text-input2");
    this.value = ko.observable("This text value is bound.");
  }
}

export = ViewModel;

define(["knockout", "ojs/ojknockout", "ojs/ojinputtext", "ojs/ojlabel"], 

  function (ko) {

    function ViewModel() {
      this.inputId1 = ko.observable("text-input1");
      this.inputId2 = ko.observable("text-input2");
      this.value = ko.observable("This text value is bound.");
    }

    return ViewModel;

  });

Oracle JET supports conditional rendering of elements by using the oj-bind-if element and importing the ojknockout module.

The oj-bind-if element is removed from the DOM after binding is applied, and must be wrapped in another element such as a div if it is used for slotting. The slot attribute has to be applied to the wrapper since oj-bind-if does not support it. For example, the following code sample shows an image that is conditionally rendered based on the option chosen in an oj-buttonset.

<div id="demo-container">
<oj-buttonset-one class="oj-buttonset-width-auto" value="{{buttonValue}}">
  <oj-option id="onOption" value="on">On</oj-option>
  <oj-option id="offOption" value="off">Off</oj-option>
</oj-buttonset-one>
<br><br>
<div>Image will be rendered if the button is on:</div>
<oj-bind-if test="[[buttonValue() === 'on']]">
  <oj-avatar role="img" aria-label="Avatar of Amy Bartlet" size="md" initials="AB"
	src="../css/images/avatar-image.jpg" class="oj-avatar-image"></oj-avatar>
</oj-bind-if>
</div>

In the above example, the oj-avatar element is an icon which can display a custom or placeholder image. See oj-avatar.

The script to create the view model for this example is shown below.

import * as ko from "knockout";
import "ojs/ojknockout";
import "ojs/ojbutton";
import "ojs/ojavatar";

class ViewModel {
  buttonValue = ko.observable("off");
}
export = ViewModel;

define(['knockout', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojavatar'],
  function (ko) {
    function ViewModel() {
      this.buttonValue = ko.observable("off");
    }
    return ViewModel;
  }
);

The figure below shows the output for the code sample. When the oj-buttonset is set to 'on', the oj-avatar element is rendered and displayed.

Description of the illustration binding_if.png

The Oracle JET Cookbook contains the complete example used in this section. See If Binding.

Oracle JET supports processing loop instructions, such as binding items from an array by using the oj-bind-for-each element and by importing the ojknockout module.

The oj-bind-for-each element only accepts a single template element as its direct child. Any markup to be duplicated, such as li tags, must be placed inside the template tag. For example, the following code sample shows an unordered list nested inside another unordered list. The list items are created using an oj-bind-text tag inside nested oj-bind-for-each elements.

<div id="form-container">
  <ul>
    <oj-bind-for-each data="[[categories]]">
      <template data-oj-as="category">
        <li>
          <ul>
            <oj-bind-for-each data="[[category.data.items]]">
              <template data-oj-as="item">
                <li>
                  <oj-bind-text value="[[category.data.name + ' : ' + item.data]]"></oj-bind-text>
                </li>
              </template>
            </oj-bind-for-each>
          </ul>
        </li>
      </template>
    </oj-bind-for-each>
  </ul>
</div>

In the above example, the data-oj-as attribute provides an alias for the bound data. This alias is referenced in the nested oj-bind-for-each and oj-bind-text elements.

The script to create the viewModel for this example is shown below.

import 'ojs/ojknockout';
import "ojs/ojbutton";

class ViewModel {
  categories: Array<Object>;

  constructor() {
    this.categories = 
      [{ name: "Fruit", items: ["Apple", "Orange", "Banana"] },
       { name: "Vegetables", items: ["Celery", "Corn", "Spinach"] }     
      ];
  }
}

export = ViewModel;

define(["ojs/ojknockout", "ojs/ojbutton"], 

  function () {

    function ViewModel() {

    this.categories = 
      [{ name: "Fruit", items: ["Apple", "Orange", "Banana"] },
       { name: "Vegetables", items: ["Celery", "Corn", "Spinach"] }     
      ];
    }

    return ViewModel;

  });

The figure below shows the output for the code sample.

The Oracle JET Cookbook contains the complete example used in this section. See Foreach Binding.

The Oracle JET attribute binding syntax also supports style attributes, which can be passed as an object or set using dot notation. The ojknockout module must be imported.

<div id="demo-container">
  <div :style="[[style]]">Data bound style attribute</div>
  <br>
  <div :style.color="[[fontColor]]" :style.font-style="[[fontStyle]]">Data bound style using dot notation</div>
</div>

import 'ojs/ojknockout';
import 'ojs/ojlabel';
import 'ojs/ojinputtext';

class ViewModel {
  fontColor = 'blue';
  fontStyle = 'italic';
  style = { fontWeight: 'bold',
            color: 'red' };
}

export = ViewModel;

define(["ojs/ojknockout", "ojs/ojlabel", "ojs/ojinputtext" ], 

  function () {

    function ViewModel() {

        this.fontColor = 'blue';
        this.fontStyle = 'italic';
        this.style = {
            fontWeight: 'bold',
            color: 'red'
          };
      }
    
   }

    return ViewModel;
});

Oracle JET provides one-way attribute data binding for event listeners on JET and HTML elements using the on-[eventname] syntax and by importing the ojknockout module.

Oracle JET event attributes provide two key advantages over native HTML event listeners. First, they provide three parameters to the listener:

• event: The DOM event, such as click or mouse over.

• data: equal to bindingContext['$data']. When used in iterations, such as in an oj-bind-for-each, this parameter is the same as bindingContext['$current'].

• bindingContext: The entire data binding context (or scope) that is applied to the element.

Second, they have access to the model state and can access functions defined in the ViewModel using the data and bindingContext parameters.

For example, the following code sample shows an oj-button that uses the on-oj-action event attribute and an HTML button that uses the on-click event attribute to access custom functions defined in the ViewModel shown below.

<div id="demo-container">
  <oj-label for="button1">oj-button element</oj-label>
  <oj-button id="button1" on-oj-action="[[clickListener1]]">Click me!</oj-button>
  <br><br>
  <label for="button2">HTML button element</label>
  <br>
  <button id="button2" on-click="[[clickListener2]]">Click me!</button>
  <br><br>
  <div style="font-weight:bold;color:#ea5b3f;">
    <oj-bind-text value="[[message]]"></oj-bind-text>
  </div>
</div>

The script to create the view model for this example is shown below. Note the usage of the data attribute to access the message parameter.

require(['ojs/ojbootstrap', 'knockout', 'ojs/ojbutton', 'ojs/ojlabel', 'ojs/ojknockout'],
  function(Bootstrap, ko) 
  {
    function ViewModel() 
    {
      this.message = ko.observable();

      this.clickListener1 = function(event, data, bindingContext)
      {
        data.message('oj-button is clicked');
      };

      this.clickListener2 = function(event, data, bindingContext)
      {
        data.message('HTML button is clicked');
      };
    }

    Bootstrap.whenDocumentReady().then(
      function ()
      {
        ko.applyBindings(new ViewModel(), document.getElementById('demo-container'));
      }
    );
  });

The figure below shows the output for the code sample.

Description of the illustration binding_event.png

The Oracle JET Cookbook contains the complete example used in this section. See Event Binding.

The Oracle JET attribute binding syntax has enhanced support for the class attribute, and can accept in addition to a string, an object or an array. This can be used to set classes on components. The ojknockout module must be imported.

The :class attribute binding can support expressions that resolve to a space delimited string, an Array of class names, or an Object of class to a boolean value or expression for toggling the class in the DOM. Object values can be used to toggle classes on and off. Array and string values can be used only to set classes.

For example, the following code sample shows an oj-input-text and an HTML input that both use :class.

<oj-input-text id="input1"
               :class="[[{'oj-form-control-text-align-right': alignRight}]]"
               value="Text Content"></oj-input-text>
<oj-button id="button2" on-oj-action="[[clickListener2]]">Toggle Alignment</oj-button>

<input id="input2" :class="[[classArrayObs]]"
       value="Text Content" style="width:100%;max-width:18em"/>
<oj-button id="button1" on-oj-action="[[clickListener1]]">Add Class</oj-button>

The script to create the view model for this example is shown below.

require(['ojs/ojbootstrap', 'knockout', 'ojs/ojlabel', 'ojs/ojinputtext', 'ojs/ojbutton', 'ojs/ojknockout'],
  function(Bootstrap, ko) 
  {
    function ViewModel() 
    {
      this.alignRight = ko.observable(false);
      this.classArrayObs = ko.observableArray();
      var classList = ['pink', 'bold', 'italic'];
      var self = this;

      this.clickListener1 = function(event, data, bindingContext) {
        var newClass = classList.pop();
        this.classArrayObs.push(newClass);

        // Disable the add button once we're out of classes
        if (classList.length === 0)
          document.getElementById('button1').disabled = true;
      }.bind(this);

      this.clickListener2 = function(event, data, bindingContext) {
        self.alignRight(!this.alignRight());
      }.bind(this);;
    }

    Bootstrap.whenDocumentReady().then(
      function ()
      {
        ko.applyBindings(new ViewModel(), document.getElementById('demo-container'));
      }
    );
  });

The CSS class styles used by the classList variable above are shown below.

.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.pink {
  color: #ff69b4;
}

The figure below shows the first of the two outputs for the code sample. The button acts as a toggle to switch on and off the oj-form-control-text-align-right class property and hence change the alignment of the text.

Description of the illustration binding_class_2.png

The figure below shows the second of the two outputs for the code sample. The button calls a function to take a pre-defined array of classes and add them to the input element. Each class has CSS modifications that come into effect when the class is added.

Description of the illustration binding_class_1.png

The Oracle JET Cookbook contains the complete example used in this section. See Class Binding.