Oracle JET Data Binding

Data Binding In Oracle Jet

Oracle JET supports two-way data binding between the View and Model layers in the Model-View-ViewModel (MVVM) design. Data changes in the ViewModel are sent to the UI components, and user input from the UI components is written back into the ViewModel.

                     

Oracle JET uses Knockout to perform the data binding between the UI elements and the ViewModel. The ViewModel normally contains data fields for the UI state as well as references to external data. One of the ways to provide external data is to use the Common Model and Collection API.

Data for an Oracle JET application can come from any web data source that generates JSON data, such as a REST service, Server Sent Event (SSE), or WebSocket. In addition, Oracle JET also provides specific support for integrating web service data based on the Oracle REST standard.

Oracle JET also provides UI components for the View layer that include properties for data binding with Knockout.

Guys, Here I'll implement one Data binding application and share with you guys.

I have create one basic JetDataBind Project Below are the step-

S1- Open Node js cmd and execute below cmd -

• ojet create JetDataBind --template=navdrawer||navbar||basic||blank
• go to the Project directory -->  cd JetDataBind 
• execute ojet serve to run the JetDataBind application.

Application look likes-

S2- In JET Application we'll have two folder inside js (viewmodels and views) both folder will have the same file         with .js and .html extension.inside viewModels we write the control logic and inside views we write the UI             code. Now open dashboard.js file and bind name property using self.

       write below code -

       self.name = ko.observable("Amit");

S3- Now Open dashboard.html from views folder and write below code-

       <div class="oj-hybrid-padding">

  <h1>Dashboard Content Area</h1>

  <h2>

  <span data-bind = "text: name">

  </span>

  </h2>

  <div>

      To change the content of this section, you will make edits to the dashboard.html file located in the /js/views           folder.

   </div>

    </div>

Now save the file and open the browser code will automatically refresh while saving the file and changes will reflect on to browser.

Now I can have more references of name property like 

<div class="oj-hybrid-padding">
  <h1>Dashboard Content Area</h1>
  <h2><span data-bind="text: name"></span></h2>
  <h2><span data-bind="text: name"></span></h2>
  <h2><span data-bind="text: name"></span></h2>
  <h2><span data-bind="text: name"></span></h2>
  <h2><span data-bind="text: name"></span></h2>
  
  <div>
      To change the content of this section, you will make edits to the dashboard.html file located in the /js/views folder.
  </div>

</div>
and see those references on the browser-

So this is how data is binded with name property.

Cheers :)