Discussions
Categories
- 197K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.8K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 556 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.4K SQL Developer
- 296.4K Development
- 17 Developer Projects
- 139 Programming Languages
- 293.1K Development Tools
- 110 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 159 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 471 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
Two-Way Data Binding JET Components with Knockout

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