Oracle JET - Knockout data-bind

When using Oracle JET for building your application you automatically make use of Knockout.js as this is a vital part of how Oracle JET works. Part of Knockout is the data-bind option. Knockout’s declarative binding system provides a concise and powerful way to link data to the UI. It’s generally easy and obvious to bind to simple data properties or to use a single binding. Understanding data-bind is one of the basic parts you need to grasp to be able to develop an application with Oracle JET.

You can bind variables defined in the viewModel (javascript) and make sure they become part of the view (HTML) code.  In the below diagram you can see the binding between the Oracle JET View and the Oracle JET View/Model

Knockout data-bind example
As you can see in the below example screenshot we have displayed the value of someVariable0. The value of someVariable0 is set in the view/model

The below example code showcases the view/model, within IncidentsViewModel funtion you can see we assign the value to the variable which has been defined outside of the IncidentsViewModel function. You can view the example code as on GitHub via this Gist link.

To ensure we bind the IncidentsViewModel variable IncidentsViewModel defined in the view/model .js file we have to make sure we bind this in the html code of the view. The below example showcases how this binding is done as part of a HTML span using the data-bind option. You can view the example code as on GitHub via this Gist link.

In effect, the above example showcases the most basic form of a knockout based Oracle JET binding between the view and the view/model.