Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

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:

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:

gaugeKnockoutTutorial1.png

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:

gaugeKnockoutTutorial.gif

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

Comments

vijayrsehgal-Oracle
30511, 00000, "invalid DDL operation in system triggers"
// *Cause:  An attempt was made to perform an invalid DDL operation
//          in a system trigger. Most DDL operations currently are not
//          supported in system triggers. The only currently supported DDL
//          operations are table operations and ALTER?COMPILE operations.
// *Action: Remove invalid DDL operations in system triggers.
971895
For that account,it has trigger. that's why it is raising the trigger.
i.e database level trigger ..ask dba to resolve this one.
1 - 2

Post Details

Added on Nov 5 2015
0 comments
2,751 views