Question

I have some global variables in my script:

var yardsToFirst = 10;
var yardsToTD = 80;
var exactDown = 1;

In my ViewModel I take in and modify the variables. According to Google Chrome’s javascript console the variables are being modified. I try to have them observed so they can update the UI like this:

self.down = ko.observable(exactDown);
self.toGo = ko.observable(yardsToFirst);
self.toGoal = ko.observable(yardsToTD);

It all works fine right when I load the page. The problem comes when I start modifying the data. the UI never changes. I have checked and the javascript console says the global variables hold the correct numbers but still the UI is not updated. Am I doing something that is impossible or have I go about it the wrong way?

Answer 1

You are doing it wrong. When you create knockout observable properties, they will just initialize with the value you gave them, i.e. ko.observable(exactDown). After that, there’s no way for knockout to know when the variable you used for initialization changed. It’s just like you tried to call ko.observable(1).

Initializing knockout observable property with some global variable doesn’t mean that knockout will start to watch that variable for changes.

Instead of modifying global variables like you do:

exactDown = newValue;

…and expecting that knockout will pick up the new value, you need to modify knockout properties directly, like this:

viewModel.down(newValue);

To modify knockout properties, you need to call them as functions (since they are basically JavaScript functions).