Setting up an observableArray

Question

I'm working to create a list of message, and woud like a ko.observableArray which automatically updates the unread count. Here's what I have so far. The view:

<p>Count <span data-bind="text: unreadCount()">&nbsp;</span></p> 
<div data-bind='template: "conversationTemplate"'> </div> 
<script type="text/html" id="conversationTemplate"> 
    <table> 
        <tbody> 
            {{each(i, conversation) converations()}} 
                    <tr> 
                        <td> 
                            ${ i } 
                        </td> 
                        <td> 
                            ${ status }, ${ title }, ${ project_name }, ${ preview } 
                        </td> 
                        <td> 
                            Participants: 
                            {{each(i, participant) participants}} 
                                                        ${ type } 
                            {{/each}} 
                        </td> 
                    </tr> 
            {{/each}} 
        </tbody> 
    </table> 
</script> 

And the View model:

$(function () {
    var viewModel = {
        converations: ko.observableArray([{
            status: "read",
            title: "blah",
            project_name: 'woopher',
            preview: 'ding dong waaa',
            participants: [{
                type: "Mobile"
            }, {
                type: "XXXXXX"
            }]
        }, {
            status: "unread",
            title: "Cha Ching",
            project_name: 'Mint',
            preview: 'Buy buy buy',
            participants: [{
                type: "DADADADA"
            }, {
                type: "Home"
            }]
        }, {
            status: "unread",
            title: "Hevan",
            project_name: 'LaLa',
            preview: 'Apple Fan',
            participants: [{
                type: "Mobile"
            }, {
                type: "XXXXXXXXXXXX"
            }]
        }])
    }
    viewModel.unreadCount = ko.dependentObservable(function () {
        return 2
    });
    ko.applyBindings(viewModel);
});

How can I computer the unreadCount, which would be the total number of conversations with a status "unread"?

Answer 1

Dependent observables take a second parameter, the object which the observable properties are methods of. So, the first thing you need to do is add the object that unreadCount should check (viewModel):

viewModel.unreadCount = ko.dependentObservable(function () { 
        return 2 
}, viewModel); // Added viewModel as the second parameter

Next, you'll want to loop through the viewModel.conversations and get the number that are unread.

viewModel.unreadCount = ko.dependentObservable(function () {
        /*
        This function will be run every time an entry is
        added or removed from `viewModel.conversations`.
        It is *not* run when a conversation in the observableArray
        is changed from "unread" to "read".
        */
        var convs = this.conversations();
        var count = 0, i = 0, l = convs.length;
        while (i < l) {
            count += convs[i++].status === 'unread' ? 1 : 0;
        } 
        return count;
}, viewModel);