Dynamically adding data to observableArray

Question

I have this viewmodel and a function to add data to it,

        function viewModel() {
            this.loadData = function() {
                this.Items().push('X');
                this.Items().push('Y');
            };

            this.Items = ko.observableArray(['A', 'B']);
        }

        var vm = new viewModel();
        ko.applyBindings(vm);
        vm.loadData();
        alert(vm.Items());

I am trying to print out the values in Items array, but X and Y are never displayed. Though the alert pops up A, B, X, and Y. What am I doing wrong?

    <div data-bind="foreach: {data: Items, as: 'item' }">
        <span data-bind="text: item"></span>
    </div>

Thanks.

robertklep · Accepted Answer · 2013-02-21 17:56:40Z

1

this.Items() exposes the underlying array of ko.observableArray(), which is just a normal array. You need to use this:

this.Items.push('X');
this.Items.push('Y');

demo

answered Feb 21, 2013 at 17:56

robertklep

205k38 gold badges421 silver badges412 bronze badges

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

2 Comments

user471317 Over a year ago

I am a little confused on when to use this.Items and when to use this.Items()? I thought I should always use Items() - I posted a similar question yesterday, stackoverflow.com/questions/14992898/…

robertklep Over a year ago

Use this.Items when you want the KnockOut 'magic' to happen when you change the contents of the array (this.Items looks like an array, but isn't really; it's a special KnockOut type which mimics an array; this.Items() returns the actual array where the data is stored, but it's not 'magic'). Your other question uses an observable, not an observableArray, which are two different things.

Vlad Stirbu · Accepted Answer · 2013-02-21 17:59:21Z

0

You should push the data directly to this.Items.

this.Items() returns the content of the observableArray.

answered Feb 21, 2013 at 17:59

Vlad Stirbu

1,8022 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

Dynamically adding data to observableArray

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related