Knockout observableArray in TypeScript

Question

What is the proper way to initialize a Knockout observableArray in a TypeScript class?

I am doing something like this:

   module ViewModel { 

        declare var ko;

        export class IndexPageViewModel {       

                agencies: any;                   

                constructor () {               
                    this.agencies = ko.observableArray([]);              
                }                                                                                                   
        }
    }


var ivm = new ViewModel.IndexPageViewModel();
ivm.agencies.push({name: "name", alias : "alias"});
for (var i = 0; i < ivm.agencies.length; i++){
    alert(ivm.agencies[i].name);
 }

Looks simple enough, but when I attempt to access the agencies property as indicated, execution hangs. Did I miss something?

Boris Yankov · Accepted Answer · 2012-10-31 22:42:21Z

13

This line is where your mistake is:

agencies[i]

When you access an observable array, it is actually wrapped in a function so you do access it like:

agencies()[i]

Also make yourself a favor and download the Knockout definitions from: https://github.com/borisyankov/DefinitelyTyped

Then declare your attributes with types:

module ViewModel {

    export class IndexPageViewModel {

        agencies: KnockoutObservableArray;

        constructor () {
            this.agencies = ko.observableArray([]);
        }
    }
}

answered Oct 31, 2012 at 22:42

Boris Yankov

1,54014 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Klaus Nji Over a year ago

That was it, thank you. Additional thanks for the link to all of the Typescript definitions.

Klaus Nji Over a year ago

Actually, accessing an observableArray is not entirely consistent. If you add items to the collection using this.agencies().push(anAgency), change notifications are not fired. But if you do this.agencies.push(anAgency), notifications are fired.

thomaux Over a year ago

@KNji it is consistent. If you call a method on this.agencies you are accessing the KO wrapper around your array. Hence any changes will be noted and an event will be fired. If you invoke this.agencies() you resolve the observable and hence will get the underlying array as a result. Pushing objects directly on this array wil bypass the KO framework and thus no change event is fired.

AlignedDev · Accepted Answer · 2015-01-06 14:36:35Z

5

I just did this in TypeScript 1.3 (though it should work in older versions too):

pendingAddAssociations: KnockoutObservableArray<ControllerModel> = ko.observableArray<ControllerModel>([]);

for your example, if you have an Agency class.

export class IndexPageViewModel {

        agencies: KnockoutObservableArray<Agency>;

        constructor () {
            this.agencies = ko.observableArray<Agency>([]);
        }
    }

I've also found that you can cast to any this.agencies = <any>[]; This is useful if you are using the Knockout ES5 plugin.

edited Jan 6, 2015 at 14:36

answered Dec 31, 2014 at 15:44

AlignedDev

8,2539 gold badges61 silver badges94 bronze badges

Collectives™ on Stack Overflow

Knockout observableArray in TypeScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related