javascript - self=this weird behavior in nested viewmodel with knockout -


i trying grips knockout.js, seem running javascript quirck not aware of.

html

<ul data-bind="foreach: somelist">     <li data-bind="text: number"></li> </ul> 

javascript

function nestedviewmodel(number) {     self = this;     self.number = ko.observable(number);  }  function viewmodel() {     self = this;     self.somelist = [];      (i=0;i<10;i++) {         var vm = new nestedviewmodel(i);         self.somelist.push(vm);     }  }  ko.applybindings(new viewmodel()); 

when run code, nothing happens. console shows error:

uncaught typeerror: cannot read property 'push' of undefined 

when remove self = this; line nestedviewmodel, , replace self.number this.number, works fine! have no clue javascript doing under hood here... have explanation this? , solution?

jsfiddle

you need declare variables putting var in front of them. without declaring them, you're trying write global self, browsers won't let do. (if weren't there's global called self in browsers, code falling prey the horror of implicit globals , still want var — in fact, later, i.)

e.g.:

function nestedviewmodel(number) {     var self = this; //  ^^^     self.number = ko.observable(number);  }  function viewmodel() {     var self = this; //  ^^^     self.somelist = [];      (var i=0;i<10;i++) { //       ^^^         var vm = new nestedviewmodel(i);         self.somelist.push(vm);     }  }  ko.applybindings(new viewmodel()); 

(mind you, there's no need self variable in quoted code, i'm assuming @ point use closure , self becomes useful then.)


it wouldn't have helped self, might want consider using strict mode, have warned undeclared i variable. putting "use strict" @ top of script file; more here.