Knockout JS - Computed Values

Question

I am new in Knockout. I cant understand one trick that find in examples. Here my code. I created 3 users... And below show my processing output when i create third user.

// It's my view
<div id="page-container">

<input type="text" data-bind="value: usernameInput" />
<button data-bind="click: addPerson">Добавить</button>

<ul data-bind="foreach: users">
    <li data-bind="text: username"></li>
</ul>

</div>

<script>
// It's my UserModel
function UserModel(username, callback){
    console.log('Start creating object...');
    var self = this;
    self.username = ko.observable(username);
    self.updateCallback = ko.computed(function(){
        console.log('updateCallback: ' + self.username());
        callback(self);
        return true;
    });
};

// It's my ViewModel
function ViewModel(){
    var self = this;
    self.users = ko.observableArray([]);
    self.usernameInput = ko.observable('');

    self.addPerson = function(){
        var u = self.usernameInput();
        var um = new UserModel(u, self.update);
        self.users.push(um);
        console.log('Item Pushed');

        self.usernameInput('');
        console.log('Users Collection: ' + self.users());
    };

    self.update = function(item){
        console.log('Update: ' + item.username());
        ko.utils.arrayFilter(self.users(), function(it) {
        });
    };
};

ko.applyBindings(new ViewModel(), document.getElementById('page-container'));

It's my console output.

Start creating object...
updateCallback: 3
Update: 3
updateCallback: 1
Update: 1
updateCallback: 2
Update: 2
updateCallback: 3
Update: 3
Item Pushed
Users Collection: [object Object],[object Object],[object Object]

This part i am understand

Start creating object...
updateCallback: 3
Update: 3

But when i try to call this function inside update method in updateCallback context:

ko.utils.arrayFilter(self.users(), function(it) {
});

its computed updateCallback 3 times, for every user...

Can anybody explain "on fingers" why is this happening... Thanks in advance for your reply...

f_martinez

It's because your updateCallback computed depends on whole users observableArray. This dependency may seem implicit but it's created via callback(self);...

Yes this dependency is implicit... But this dependency is not yet clear for me...

When i use LOOP inside update, like this: for(var i in self.users()){} it's computed updateCallback 3 times, for every user... But if i remove loop and create third user... I'll get only this output:

Start creating object...
updateCallback: 3
Update: 3
Item Pushed
Users Collection: [object Object],[object Object],[object Object]

I cant understand how updateCallback depends on whole users observableArray... I am only use simple empty LOOP and dont change anything inside...

Answer 1

It's because your updateCallback computed depends on whole users observableArray. This dependency may seem implicit but it's created via callback(self); which at the next level of stack has expression:

ko.utils.arrayFilter(self.users(), ...)`

With every new user you also create new computed inside and this computed depends on the array. So having two users in the array means that any change in this array will trigger two computeds.

So... When you add the third user:

1. the constructor creates one more computed which evaluates immediately after creation (outputs 3), and
2. the array changes and all previously created computeds evaluate again (outputs 1, 2, 3).

Update

No matter if you change the observable or observableArray in computed or not. As you know observables and observable arrays are functions actually. So if you call any observable inside then this call is tracked to create dependency.

And this is really cool and simple concept of whole Knockout. By the way there is good article about dependency tracking in the official KO docs.

Answer 2

I'm understand!!! Let's i try to explain!

I added some helpfull examples! See bellow!

First

<div id="page-container">

    <input type="text" data-bind="value: usernameInput" />
    <button data-bind="click: addPerson">Add</button>
    <button data-bind="click: pushObject">Dependency</button>

    <ul data-bind="foreach: users">
        <li data-bind="text: username"></li>
    </ul>

</div>

<script>

    function UserModel(username, dependency){
        console.log('Start creating object...');
        var self = this;
        self.username = ko.observable(username);
        self.updateCallback = ko.computed(function(){
            console.log(username);
            dependency();
            return self.username();
        });
    };

    function ViewModel(){
        var self = this;
        self.dependency = ko.observableArray([]);

        self.users = ko.observableArray([]);
        self.usernameInput = ko.observable('');

        self.addPerson = function(){
            var u = self.usernameInput();
            var um = new UserModel(u, self.dependency);
            self.users.push(um);
            console.log('Item pushed');
            self.usernameInput('');
        };

        self.pushObject = function(){
            self.dependency.push({});
        };
    };

</script>

My Console Output:

Start creating object...
1
Item pushed
Start creating object...
2
Item pushed
Start creating object...
3
Item pushed
1
2
3

Second:

<div id="page-container">

    <input type="text" data-bind="value: usernameInput" />
    <button data-bind="click: addPerson">Add</button>
    <button data-bind="click: setString">Dependency</button>

    <ul data-bind="foreach: users">
        <li data-bind="text: username"></li>
    </ul>

</div>

<script>

    function UserModel(username, dependency){
        console.log('Start creating object...');
        var self = this;
        self.username = ko.observable(username);
        self.updateCallback = ko.computed(function(){
            console.log(username);
            dependency();

            return self.username();
        });
    };

    function ViewModel(){
        var self = this;
        self.users = ko.observableArray([]);
        self.usernameInput = ko.observable('');

        self.dependency = ko.observable();

        self.addPerson = function(){
            var u = self.usernameInput();
            var um = new UserModel(u, self.dependency);
            self.users.push(um);
            console.log('Item pushed');
            self.usernameInput('');
        };

        self.setString = function(){
            self.dependency('');
        };
    };

</script>

My Console Output:

Start creating object...
1
Item pushed
Start creating object...
2
Item pushed
Start creating object...
3
Item pushed
1
2
3

I am thought that values recomputed before item pushed in users collection. But in fact its recomputed after item pushed in users collection. It's KEY POINT!!! And 2 good examples for studying!!!

f_martinez thanks you!