OJET7: OJET Bindings
2 types of Binding OJET supports
-------------------------------------------
- KO binding
- OJET custom binding
KO binding
-------------
Checkbox -
<input type="checkbox" data-bind="
checked: agreed">
Button
-
<button data-bind="enable:agreed">
Text
-
<input type="text" data-bind="
value:newStudent,
valueUpdate:'afterkeydown'"/>
Button
-
<button data-bind="
click: addStudent,
enable:newStudent().length > 0">
select
-
<select multiple data-bind="
options:studentList,
selectedOptions:selectedStd">
ForEach - <p> & <table>
------------------------
<p data-bind="foreach: studentList"><input name="std" type="radio" data-bind="
value: $data,
checked: $parent.choosenRadioStd"/></p>
<table data-bind="
foreach:personList"
<td><span data-bind="text: $data.firstName">
<!-- ko foreach:personList -->
<span data-bind="
text: $data.firstName"></span>
<!-- /ko -->
OJET custom binding
---------------------
{{value}} - 2 way binding
[[value]] - 1 way binding
Examples:
-------------
<oj-input-text value="
{{uname}}" required></oj-input-text>
<span> <oj-bind-text value="
[[uname]]"></oj-bind-text> </span>
<oj-input-date value="
{{dob}}" required></oj-input-date>
<oj-button on-oj-action='
[[buttonClick]]' id="mybutton"> Click Me</oj-button>
<oj-checkboxset id="checkboxSetAgreeId" labelled-by="agreeId"
value="
{{agreement}}"
required >
<oj-option id="agree" value="agree">I Agree</oj-option>
</oj-checkboxset>
<oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid"
value="
{{currentColor}}" >
<oj-option id="blueopt" value="blue">Blue</oj-option>
<oj-option id="greenopt" value="green">Green</oj-option>
<oj-option id="redopt" value="red">Red</oj-option>
</oj-radioset>
####################Example1############################
first.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>OJET Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/require/require.js" data-main="js/first"></script>
<link rel="stylesheet" id="css" href="css/libs/oj/v5.2.0/alta/oj-alta-min.css">
</head>
<body>
<div>Hi.. <h1 data-bind="text:uname"></h1></div>
<p>
Good Morning123,
<span> <oj-bind-text value="[[uname]]"></oj-bind-text> </span>
</p>
<oj-button on-oj-action='[[buttonClick]]' id="mybutton"> Click Me</oj-button>
<oj-file-picker accept='[[acceptValue]]' on-oj-select='[[fileSelected]]'></oj-file-picker>
<p>Selected file is : <span data-bind="text:fileName"></span></p>
<oj-toolbar>
<oj-button>Home</oj-button>
<oj-button>Customers</oj-button>
<oj-button>Contact Us</oj-button>
</oj-toolbar>
</body>
</html>
js/first.js
/**
* Example of Require.js boostrap javascript
*/
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'libs/knockout/knockout-3.4.2',
'jquery': 'libs/jquery/jquery-3.3.1.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.1.min',
'ojs': 'libs/oj/v5.2.0/min',
'ojL10n': 'libs/oj/v5.2.0/ojL10n',
'ojtranslations': 'libs/oj/v5.2.0/resources',
'text': 'libs/require/text',
'promise': 'libs/es6-promise/es6-promise.min',
'hammerjs': 'libs/hammer/hammer-2.0.8.min',
'signals': 'libs/js-signals/signals.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'css': 'libs/require-css/css.min',
'customElements': 'libs/webcomponents/custom-elements.min',
'proj4': 'libs/proj4js/dist/proj4'
},
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
},
// This section configures the i18n plugin. It is merging the Oracle JET built-in translation
// resources with a custom translation file.
// Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
// a path that is relative to the location of this main.js file.
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
}
},
text: {
// Override for the requirejs text plugin XHR call for loading text resources on CORS configured servers
useXhr: function (url, protocol, hostname, port) {
// Override function for determining if XHR should be used.
// url: the URL being requested
// protocol: protocol of page text.js is running on
// hostname: hostname of page text.js is running on
// port: port of page text.js is running on
// Use protocol, hostname, and port to compare against the url being requested.
// Return true or false. true means "use xhr", false means "fetch the .js version of this resource".
return true;
}
}
}
});
/**
* A top-level require call executed by the Application.
* Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
* by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
* objects in the callback.
*
* For a listing of which JET component modules are required for each component, see the specific component
* demo pages in the JET cookbook.
*/
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout','ojs/ojbutton', 'ojs/ojfilepicker','ojs/ojtoolbar'], // add additional JET component modules as needed
function(oj, ko, $) // this callback gets executed when all required modules are loaded
{
// add any startup code that you want here
function MyModel(){
var self = this;
console.log("Model created..")
self.uname = ko.observable("Pavan..");
self.buttonClick = function(event){
console.log("Inside buttonClick - ",event);
console.log("button id - ",event.target.id);
}
self.fileName = ko.observable();
self.fileSelected = function(event){
console.log("Inside fileSelected - ",event);
console.log("button id - ",event.detail.files[0]);
self.fileName(event.detail.files[0].name);
}
self.acceptValue = ko.observableArray(['image/*']);
}
$(document).ready(function(){
ko.applyBindings(new MyModel());
});
}
);
####################Example 2############################
formElements.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="fr">
<head>
<title>OJET Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/require/require.js" data-main="js/formElements"></script>
<link rel="stylesheet" id="css" href="css/libs/oj/v5.2.0/alta/oj-alta-min.css">
</head>
<body>
<h2>Sample Form</h2>
<div>
<oj-label show-required>UserName</oj-label>
<oj-input-text value="{{uname}}" required></oj-input-text>
<oj-label show-required>Password</oj-label>
<oj-input-password value="{{pwd}}" required></oj-input-password>
<oj-label show-required>DOB</oj-label>
<oj-input-date value="{{dob}}" required></oj-input-date>
<oj-label id="agreeId" show-required>License Agreement </oj-label>
<oj-checkboxset id="checkboxSetAgreeId" labelled-by="agreeId"
value="{{agreement}}"
required >
<oj-option id="agree" value="agree">I Agree</oj-option>
</oj-checkboxset>
<oj-label id="mainlabelid">Colors</oj-label>
<oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid"
value="{{currentColor}}" >
<oj-option id="blueopt" value="blue">Blue</oj-option>
<oj-option id="greenopt" value="green">Green</oj-option>
<oj-option id="redopt" value="red">Red</oj-option>
<oj-option id="limeopt" value="lime">Lime</oj-option>
<oj-option id="aquaopt" value="aqua">Aqua</oj-option>
</oj-radioset>
</div>
<oj-label show-required>Address</oj-label>
<oj-input-text value="{{address}}" disabled></oj-input-text>
<div>
<p>You entered below Username : <span data-bind="text: uname"></span></p>
<p>You entered below Password : <span data-bind="text: pwd"></span></p>
<p>You entered below DOB : <span data-bind="text: dob"></span></p>
<p>License Agreement : <span data-bind="text: agreement"></span></p>
<p>License Agreement : <span data-bind="text: currentColor"></span></p>
</div>
</body>
</html>
formElements.js
/**
* Example of Require.js boostrap javascript
*/
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'libs/knockout/knockout-3.4.2',
'jquery': 'libs/jquery/jquery-3.3.1.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.1.min',
'ojs': 'libs/oj/v5.2.0/min',
'ojL10n': 'libs/oj/v5.2.0/ojL10n',
'ojtranslations': 'libs/oj/v5.2.0/resources',
'text': 'libs/require/text',
'promise': 'libs/es6-promise/es6-promise.min',
'hammerjs': 'libs/hammer/hammer-2.0.8.min',
'signals': 'libs/js-signals/signals.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'css': 'libs/require-css/css.min',
'customElements': 'libs/webcomponents/custom-elements.min',
'proj4': 'libs/proj4js/dist/proj4'
},
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
},
// This section configures the i18n plugin. It is merging the Oracle JET built-in translation
// resources with a custom translation file.
// Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
// a path that is relative to the location of this main.js file.
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
}
},
text: {
// Override for the requirejs text plugin XHR call for loading text resources on CORS configured servers
useXhr: function (url, protocol, hostname, port) {
// Override function for determining if XHR should be used.
// url: the URL being requested
// protocol: protocol of page text.js is running on
// hostname: hostname of page text.js is running on
// port: port of page text.js is running on
// Use protocol, hostname, and port to compare against the url being requested.
// Return true or false. true means "use xhr", false means "fetch the .js version of this resource".
return true;
}
}
}
});
/**
* A top-level require call executed by the Application.
* Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
* by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
* objects in the callback.
*
* For a listing of which JET component modules are required for each component, see the specific component
* demo pages in the JET cookbook.
*/
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout','ojs/ojbutton', 'ojs/ojfilepicker','ojs/ojtoolbar','ojs/ojlabel','ojs/ojinputtext','ojs/ojdatetimepicker', 'ojs/ojcheckboxset','ojs/ojradioset'], // add additional JET component modules as needed
function(oj, ko, $) // this callback gets executed when all required modules are loaded
{
// add any startup code that you want here
function MyModel(){
var self = this;
console.log("Model created..")
self.uname = ko.observable("Pavan..");
self.pwd = ko.observable();
self.dob = ko.observable();
self.agreement = ko.observable();
self.currentColor = ko.observable('red');
self.address = ko.observable("You cannot change..Disabled.");
}
$(document).ready(function(){
ko.applyBindings(new MyModel());
});
}
);
