Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding

Applications Web Development
1

Working on LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding in this Oracle JET online course - Soar higher with Oracle JavaScript Extension Toolkit (JET), I have created this code for incidents.js

I cannot get the load average data in this Oracle JET test to update the knockout.js data-bindings unless I refresh the page.

I have tried both using the JS timer setInterval() method and also just clicking in and out of the incidents view, but no joy. The data never updates after initializing unless I manually reload the page.

Anyone have any ideas?

/*
 * Your incidents ViewModel code goes here
 */
define([
  "ojs/ojcore",
  "knockout",
  "jquery",
  "text!data/data.json",
  "ojs/ojchart"
], function(oj, ko, $, file) {
  function IncidentsViewModel() {
    var self = this;
    self.load1 = ko.observable();
    self.load5 = ko.observable();
    self.load10 = ko.observable();
    self.allprocs = ko.observable();
    self.lastpid = ko.observable();
    var n = 0;
    var query = { loadavg: "1" };
    var items = new Array();
    setInterval(function() {
      $.getJSON("https://www.unix.com/ojet.php", query, function(json) {
        console.log(JSON.stringify(json));
        $.each(json, function(key, val) {
          n++;
          switch (n) {
            case 1:
              self.load1 = ko.observable(val);
              break;
            case 2:
              self.load5 = ko.observable(val);
              break;
            case 3:
              self.load10 = ko.observable(val);
              break;
            case 4:
              self.allprocs = ko.observable(val);
              break;
            case 5:
              self.lastpid = ko.observable(val);
              break;
            default:
          }
          // console.log("success items " + items.length + " " + val);
        });
      })

        //  self.datasource = ko.observableArray(items);
        .done(function() {
          console.log("second success");
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    }, 5000);
    var data = JSON.parse(file);
    self.datasource = ko.observableArray(data);

    // Below are a set of the ViewModel methods invoked by the oj-module component.
    // Please reference the oj-module jsDoc for additional information.

    /**
     * Optional ViewModel method invoked after the View is inserted into the
     * document DOM.  The application can put logic that requires the DOM being
     * attached here.
     * This method might be called multiple times - after the View is created
     * and inserted into the DOM and after the View is reconnected
     * after being disconnected.
     */
    self.connected = function() {
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after the View is disconnected from the DOM.
     */
    self.disconnected = function() {
      console.log(" self.disconnected = function()");
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after transition to the new View is complete.
     * That includes any possible animation between the old and the new View.
     */
    self.transitionCompleted = function() {
      // Implement if needed
    };
  }

  /*
     * Returns a constructor for the ViewModel so that the ViewModel is constructed
     * each time the view is displayed.  Return an instance of the ViewModel if
     * only one instance of the ViewModel is needed.
     */
  return new IncidentsViewModel();
});

Here is the HTML in incidents.html

<!--
 Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 The Universal Permissive License (UPL), Version 1.0
 -->
<div class="oj-hybrid-padding" style="width:25%">
  <h2>UNIX.COM Load Averages</h2>
  <div><span>Load 1: </span><span data-bind="text: load1" style="float:right"></span></div>
  <div><span>Load 5: </span><span data-bind="text: load5" style="float:right"></span></div>
  <div><span>Load 10: </span><span data-bind="text: load10" style="float:right"></span></div>
  <div><span>Active/All Processes: </span><span data-bind="text: allprocs" style="float:right"></span></div>
  <div><span>Last PID: </span><span data-bind="text: lastpid" style="float:right"></span></div>
</div>
<div data-bind="ojComponent:{
            component: 'ojChart',
            type: 'bar',
            series: datasource
  }">
</div>



</div>
<oj-chart type="bar" series="[[datasource]]"></oj-chart>
</oj-chart>
</div>

Reference:

LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - P... | Oracle Community

2

Note: I updated the JS code above by wrapping the $.getJSON call with:

ko.computed(function() {
    
}, self);

Per this knockout.js page:

Knockout : How dependency tracking works

But no joy ...

4

Based on suggestion from Andrew Bennett to change:

self.variable = ko.observable(newVal) to  self.variable(newVal)

Still does not update.....

/**
 * @license
 * Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 */
/*
 * Your incidents ViewModel code goes here
 */
define([
  "ojs/ojcore",
  "knockout",
  "jquery",
  "text!data/data.json",
  "ojs/ojchart"
], function(oj, ko, $, file) {
  function IncidentsViewModel() {
    var self = this;
    self.load1 = ko.observable();
    self.load5 = ko.observable();
    self.load10 = ko.observable();
    self.allprocs = ko.observable();
    self.lastpid = ko.observable();
    var n = 0;
    var items = new Array();

    setInterval(function() {
      var query = { loadavg: "1" };

      $.getJSON("https://www.unix.com/ojet.php", query, function(json) {
        console.log(JSON.stringify(json));
        $.each(json, function(key, val) {
          n++;
          switch (n) {
            case 1:
              self.load1(val);
              break;
            case 2:
              self.load5(val);
              break;
            case 3:
              self.load10(val);
              break;
            case 4:
              self.allprocs(val);
              break;
            case 5:
              self.lastpid(val);
              break;
            default:
          }
          // console.log("success items " + items.length + " " + val);
        });
      })

        //  self.datasource = ko.observableArray(items);
        .done(function() {
          console.log("second success");
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    }, 5000);
    var data = JSON.parse(file);
    self.datasource = ko.observableArray(data);
    // Below are a set of the ViewModel methods invoked by the oj-module component.
    // Please reference the oj-module jsDoc for additional information.

    /**
     * Optional ViewModel method invoked after the View is inserted into the
     * document DOM.  The application can put logic that requires the DOM being
     * attached here.
     * This method might be called multiple times - after the View is created
     * and inserted into the DOM and after the View is reconnected
     * after being disconnected.
     */
    self.connected = function() {
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after the View is disconnected from the DOM.
     */
    self.disconnected = function() {
      console.log(" self.disconnected = function()");
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after transition to the new View is complete.
     * That includes any possible animation between the old and the new View.
     */
    self.transitionCompleted = function() {
      // Implement if needed
    };
  }

  /*
     * Returns a constructor for the ViewModel so that the ViewModel is constructed
     * each time the view is displayed.  Return an instance of the ViewModel if
     * only one instance of the ViewModel is needed.
     */
  return new IncidentsViewModel();
});
5

OK... fixed because of the "n" var (used to help parse the JSON) in the wrong location:

/**
 * @license
 * Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 */
/*
 * Your incidents ViewModel code goes here
 */
define([
  "ojs/ojcore",
  "knockout",
  "jquery",
  "text!data/data.json",
  "ojs/ojchart"
], function(oj, ko, $, file) {
  function IncidentsViewModel() {
    var self = this;
    self.load1 = ko.observable();
    self.load5 = ko.observable();
    self.load10 = ko.observable();
    self.allprocs = ko.observable();
    self.lastpid = ko.observable();
       var items = new Array();

    setInterval(function() {
      var query = { loadavg: "1" };

      $.getJSON("https://www.unix.com/ojet.php", query, function(json) {
        console.log(JSON.stringify(json));
        var n = 0;
        $.each(json, function(key, val) {
          n++;
          switch (n) {
            case 1:
              self.load1(val);
              break;
            case 2:
              self.load5(val);
              break;
            case 3:
              self.load10(val);
              break;
            case 4:
              self.allprocs(val);
              break;
            case 5:
              self.lastpid(val);
              break;
            default:
          }
          // console.log("success items " + items.length + " " + val);
        });
      })

        //  self.datasource = ko.observableArray(items);
        .done(function() {
          console.log("second success");
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
    }, 5000);
    var data = JSON.parse(file);
    self.datasource = ko.observableArray(data);
    // Below are a set of the ViewModel methods invoked by the oj-module component.
    // Please reference the oj-module jsDoc for additional information.

    /**
     * Optional ViewModel method invoked after the View is inserted into the
     * document DOM.  The application can put logic that requires the DOM being
     * attached here.
     * This method might be called multiple times - after the View is created
     * and inserted into the DOM and after the View is reconnected
     * after being disconnected.
     */
    self.connected = function() {
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after the View is disconnected from the DOM.
     */
    self.disconnected = function() {
      console.log(" self.disconnected = function()");
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after transition to the new View is complete.
     * That includes any possible animation between the old and the new View.
     */
    self.transitionCompleted = function() {
      // Implement if needed
    };
  }

  /*
     * Returns a constructor for the ViewModel so that the ViewModel is constructed
     * each time the view is displayed.  Return an instance of the ViewModel if
     * only one instance of the ViewModel is needed.
     */
  return new IncidentsViewModel();
});
6

Quick and short screen movie of working example "loadavg" attached.

Solved thanks to great Oracle community support.

Thanks Oracle JET :slight_smile: