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

Tags
data binding, knockout.js, linux, ojet, oracle, oracle jet, solved

 
Thread Tools Search this Thread
# 1  
Old 10-17-2018
Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding

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?

Code:
/*
 * 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

Code:
<!--
 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
Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding-screen-shot-2018-10-17-10-24-01-am-png
# 2  
Old 10-17-2018
Note: I updated the JS code above by wrapping the $.getJSON call with:

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

Per this knockout.js page:

Knockout : How dependency tracking works

But no joy ...
# 3  
Old 10-17-2018
Based on suggestion from Andrew Bennett to change:

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

Still does not update.....

Code:
/**
 * @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();
});

# 4  
Old 10-17-2018
OK... fixed because of the "n" var (used to help parse the JSON) in the wrong location:

Code:
/**
 * @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();
});

# 5  
Old 10-17-2018
Quick and short screen movie of working example "loadavg" attached.

Solved thanks to great Oracle community support.

Thanks Oracle JET Smilie

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
A Quick Web Developers Review of Oracle JET Neo Web Programming 4 11-02-2018 12:22 PM
Creating a Simple Linux Dashboard with Oracle Jet Neo Web Programming 6 10-22-2018 07:49 AM
Oracle JET 4.x - Lesson 1 - Part 9: Oracle JET Cookbook (Gauges and Ints) Neo Web Programming 1 10-18-2018 09:58 AM
Excellent Oracle JET Video - "Finally, JavaScript Is Easy!" Neo What is on Your Mind? 0 10-15-2018 12:27 AM
Securing AIX - Hardening Lesson 101 MichaelFelt AIX 3 03-02-2013 12:20 PM
JET and non-global Zone beta17 Solaris 0 07-22-2011 07:03 AM
Textfile lesson lazybaer Shell Programming and Scripting 0 03-11-2010 03:54 AM
Jet/Jumpstart installation freezing masloff Solaris 4 11-18-2009 11:54 AM
Rename multiple files lesson ScKaSx Shell Programming and Scripting 2 01-15-2009 11:51 PM
Lesson Learned: Dual boot XP and Fedora 9 rlandon@usa.net UNIX for Advanced & Expert Users 1 09-13-2008 12:59 PM