Einrichten eines Beobachtungsabschieds

Question

Ich arbeite daran, eine Liste der Nachrichten zu erstellen und wie a ko.observableArray die automatisch die ungelesene Anzahl aktualisiert. Folgendes habe ich bisher. Die Aussicht:

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

Und das Ansichtsmodell:

$(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);
});

Wie kann ich das computert? unreadCount, Was wäre die Gesamtzahl der Gespräche mit einem Status "ungelesen"?

Answer 1

Abhängige Observablen Nehmen Sie einen zweiten Parameter, das Objekt, das die beobachtbaren Eigenschaften sind. Das erste, was Sie tun müssen, ist das Objekt hinzuzufügen, das unreadCount sollte überprüfen (viewModel):

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

Als nächstes möchten Sie durch die schauen viewModel.conversations und holen Sie sich die Nummer, die ungelesen sind.

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);