In multiple scenarios, I am trying to pass some variables to functions that (asynchronously) read data (from a REST JSON endpoint).
I am unable to reference or pass KnockOut observables and use them around in sub-functions: I always get '<observable_name> is not a function'
An example, where the displayIfTableLoading would be used as the 'style' attribute of an HTML element, this making it appear as some action is completed (it does not change if I use a boolean instead of a string):
define(['knockout', 'ojs/ojcore', 'jquery',....],
function(ko, oj, $) {
function viewModel() {
var self = this;
...
self.displayIfTableLoading=ko.observable('none' );
self.displayIfTableLoading('none' ); //pointless but to prove the problem - in this context it works
doSometing(self.displayIfTableLoading);
}
function doSomething(obs4Table) {
....
$.getJSON("my/rest/endpoint").
then(function(result) {
... parse results
obs4Table('inline'); //here the error - it does not change if I move this out of the $.getJSON function
}
}
return viewModel;
}
The error would be jQuery.Deferred exception: obs4Table is not a function TypeError: obs4Table is not a function
I get it's a problem related to the way JS and Knockout handle the scope, and perhaps I am doing it all wrong. So, what is the proper way of achieving this, keeping the doSomething() function? I am ok with changing my entire approach to this: my only requirements is the doSomething() function to remain a function, as it will be invoked elsewhere.
Any suggestion is appreciated.