We have a for loop that populates an observable array in knockout. For some reason, only the first item started being loaded, even though we hadn\u2019t made any changes to the loop, and all the data was still being sent down.<\/p>\n
The loop starts off:<\/p>\n
for (i = 0; i < ts.Weeks.length; i++) {<\/pre>\nI stepped through the loop using Chrome debugger and found that i=0 consistently, all the way until the very end of the body, when we added the data object to the observable array:<\/p>\n
self.Weeks.push(week);<\/pre>\nAt this point, it jumped to i=10 right before going back to the top. Of course, with only a half-dozen data items, the loop then exited. But, nothing else in the loop modifies i, and where was 10 coming from anyways??<\/p>\n
Since the array was observable, when it was updated with push, knockout also called all the various \u201ccomputed\u201d functions. Also since the for loop variable \u201ci\u201d was declared without var, it was actually in the global scope! One of those computed (I didn\u2019t figure out which one), or a library that they used, also had an \u201ci\u201d that was in the global scope, and the two variables were clobbering each other.<\/p>\n
Although I didn\u2019t determine the other perpetrator code, simply updating the loop, by adding var, to read<\/p>\n
for (var i = 0; i < ts.Weeks.length; i++) {<\/pre>\nsolved the issue by ensuring the variable i was function scoped.<\/p>\n
It\u2019s easy to forget in languages like C# that don\u2019t do global scope by default\u2026 JavaScript does do global scope by default!<\/p>\n","protected":false},"excerpt":{"rendered":"
We have a for loop that populates an observable array in knockout. For some reason, only the first item started being loaded, even though we hadn\u2019t made any changes to the loop, and all the data was still being sent … Continue reading