4 Replies Latest reply on Oct 17, 2018 9:41 AM by neounix

    LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding (Question 2) - Updates

    neounix

      Hi,  I'm still experimenting with Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding

       

      In this test, I have created a remote PHP process which I access using $.getJSON(), per this example, which I

      posted on unix.com so it's easy to read the code tags and script, so please refer to the Oracle JET code at

      this link:

       

      https://www.unix.com/web-programming/280137-oracle-jet-lp-10-lesson-1-oracle-jet-4-x-lesson-1-part-4-data-binding.html

       

      The problem as stated in the link above is:

       

      I cannot get the load average data in this Oracle JET test to update the knockout.js data-bindings unless I manually 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.

       

      Anyone have any ideas?

       

       

       

      Screen Shot 2018-10-17 at 10.24.01 AM.png

       

      Message was edited by: neounix

        • 1. Re: LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding (Question 2) - Updates
          Andrew Bennett

          Hey

           

          Simple fix to get it working. When working with knockout observables you define them initially at the start of your file. When you then need to update the value you don't do self.variable = ko.observable(newVal) it should be self.variable(newVal)

           

          While it may look like it's updated in the js file, by doing = ko.observable you have broken the link to the variable that the HTML was initially bound to, therefore the element isn't updated.

           

          Have a read of this page, the section on reading / writing observables https://knockoutjs.com/documentation/observables.html

           

           

          Cheers,

          Andy

          1 person found this helpful
          • 2. Re: LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding (Question 2) - Updates
            neounix

            Hi Andrew!

             

            Thanks so much for the reply. Awesome for the help!  

             

            I read the link you provided and immediately tried your suggestion to change the entries in my $.getJSON() test callback with:

             

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

             

            In the references link you provided, I did not see the exact same issue, but maybe I'm tired and missed it, lost in the learning curve, maybe.

             

            I did exactly what I thought you suggested (thanks again) and appended the current JS file (incidents.js) as a reply to the original link above (for easier reading).

             

            Unfortunately, the values still do not update in the browser.   even though $.getJSON() repeats every few seconds using setInterval() and the console.log

            shows the new values; but the expected behavior is not working and the values stay static and only update on the page when I manually refresh the page

            and then click on the "incidents" tab.

             

            The console.log entry shows the new values updating (currently every five secs) based on the $.getJSON call with setInterval() and there are no errors.

             

            I reread the docs, but sadly I am just a dumb knockout.js noob who does not understand the gist of it, since I expect it to update

            with the changes you kindly suggested.

             

            Thanks for your help.

             

            PS:  I added a screen capture movie to my post at unix.com if this helps.

            • 3. Re: LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding (Question 2) - Updates
              Andrew Bennett

              I've just spotted the issue. In your loop you have n++ but it never gets reset to 0. Therefore the next interval that runs it will not reach the case statements. Quick fix is to just do n = 0 before the loop.

               

              This is worth a go through learn.knockoutjs.com

               

              Andy

              1 person found this helpful
              • 4. Re: LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding (Question 2) - Updates
                neounix

                Yep . Thanks.  I just found the same issue and moved  to the correct location.

                 

                Thanks for your help.

                 

                It's working as expected now

                 

                PS:  I did a few of the learn.knockoutjs.com examples... seems I need to do more.

                 

                Thanks again!