Oracle Jet – Knockout Concept for Data Binding

Aim of this exercise is to have data binding between js file and html file.

  • Add below code in dashboard.js and make sure it has knockout function as highlighted

    var self = this;

    self.name = ko.observable(“Puneet”);

  • Refer data binding in dashboard.html file

    <h2> <span data-bind=”text: name”></span></h2>

  • Test your work

  • Let’s modify html code to have Input Value as below

    <h2> <input data-bind=”value: name”/></h2>

    <h2> <span data-bind=”text: name”></span></h2>

    <h2> <span data-bind=”text: name”></span></h2>

  • Test your work

  • Provide text input and tab as below. Page is running successfully as required

  • Let’s modify html code to have TextInput Value as below

    <h2> <input data-bind=”textInput: name”/></h2>

    <h2> <span data-bind=”text: name”></span></h2>

    <h2> <span data-bind=”text: name”></span></h2>

  • Test your work. Values should change as per input provided in Text box