title: Why is my viewModel updated in HTML but not in my javascript?
body: <p>I have a function that moves a line item up one line at a time. For simplicity, I'm showing a small part of the code. My observable's display as expected in HTML using $root.cRecordID, but in my code, they are undefined. It's confusing and frustrating. Can anyone shed some light?</p>
  
  <pre><code>listOrderUp: function (lid) {
      // get RecordID of selected item
      //viewModel.loadItemByID(lid);
      console.log(lid);
  
      OData.read(_serviceURL + "/nsLineItems(" + lid + ")?", function (response) {
          viewModel.cRecordID(response.RecordID);
          viewModel.cMenuID(response.MenuID);
          viewModel.cEntreeID(response.EntreeID);
          viewModel.cCategoryID(response.CategoryID);
          viewModel.cListOrder(response.ListOrder);
      });
  
      console.log(viewModel.cRecordID());
  
      // selected item - decrease ListOrder by 1
      var putdataCurrent = {
          RecordID: viewModel.cRecordID(),
          MenuID: viewModel.cMenuID(),
          CategoryID: viewModel.cCategoryID(),
          EntreeID: viewModel.cEntreeID(),
          ListOrder: viewModel.cListOrder() - 1
      };
  
      console.log(putdataCurrent);
  
      var _requestCurrent = {
          requestUri: _serviceURL + "/nsLineItems(" + viewModel.cListOrder() + ")",
          method: "MERGE",
          data: putdataCurrent
      };
  
      OData.request(_requestCurrent, function (data) {
      });
  }
  </code></pre>
  
  <p>Here's console results:
  <a href="https://i.stack.imgur.com/flY6C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flY6C.jpg" alt="enter image description here"></a></p>
  
  <p>Here's my html test code: 
              
          </p>
  
  <p>This displays the expected result, but I need the results in my code so I can save the data to the server. How can it be undefined in the code(javascript file) but it displays correctly in html? 
  Thanks, Jeff</p>