Mise en place d'un observableArray
-
13-10-2019 - |
Question
Je travaille pour créer une liste de messages et woud comme un ko.observableArray
qui met à jour automatiquement le compte non lu. Voici ce que j'ai jusqu'à présent. La vue:
<p>Count <span data-bind="text: unreadCount()"> </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>
Et le modèle Vue:
$(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);
});
Comment puis-je l'ordinateur unreadCount
, ce qui serait le nombre total de conversations avec un statut « non lu »?
La solution
observables dépendantes prendre un second paramètre, l'objet dont les propriétés observables des procédés de. Donc, la première chose que vous devez faire est d'ajouter l'objet unreadCount
doit vérifier (viewModel
):
viewModel.unreadCount = ko.dependentObservable(function () {
return 2
}, viewModel); // Added viewModel as the second parameter
Ensuite, vous aurez envie de boucle à travers le viewModel.conversations
et obtenir le numéro non lus.
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);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow