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?
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.