Hi,
I am having some issues with use of virtualList and data attributes.
What I am trying to do is a contact list with “badge” on unread messages.
currently I have:
// Dummy contact list
var contact_items = [{
uid: '1',
name: 'Ivan Petrov',
status: 'offline',
avatar: 'images/user_placeholder_50x50.jpg',
favorite: 'no',
unreadmessages: 0
},
{
uid: '2',
name: 'John Doe',
status: 'online',
avatar: 'images/dummy_user_7.jpg',
favorite: 'no',
unreadmessages: 2
}];
var contactList = app.virtualList.create({
el: '.virtual-list',
items: contact_items,
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found; //return array with mathced indexes
},
itemTemplate:
'<li class="swipeout deleted-callback" data-contact-uid="{{uid}}" data-contact-name="{{name}}" data-contact-status="{{status}}" data-contact-favorite="{{favorite}}" data-contact-avatar="{{avatar}}">' +
'<div class="item-content swipeout-content">' +
'<div class="item-media {{#if unreadmessages}}cmbadge{{/if}}" data-badge="{{unreadmessages}}">' +
'<img src="{{avatar}}" class="userprofile e-contact-msg {{status}}">' +
'</div>' +
'<div class="item-inner">' +
'<div class="item-title e-contact-msg">{{name}}</div>' +
'<div class="item-after">' +
'<a href="#" class="button list-button e-contact-video">' +
'<i class="icon f7-icons ios-only">videocam</i>' +
'<i class="material-icons md-only">videocam</i>' +
'</a>' +
'<a href="#" class="button list-button e-contact-audio">' +
'<i class="icon f7-icons ios-only">call</i>' +
'<i class="material-icons md-only">call</i>' +
'</a>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="swipeout-actions-right">' +
'<a href="#" class="set-contact-favorite">Favorite</a>'+
'<a href="#" data-confirm="Are you sure you want to delete this contact?" class="swipeout-delete">Delete</a>' +
'</div>' +
'</li>',
// Item height
height: app.theme === 'ios' ? 63 : 73
});
// increase badge by 1, add class "cmbadge"
function badgeIncrease(uid) {
var selector = $$('li[data-contact-uid="'+uid+'"] .item-media');
contactList.items.forEach(function (value, index) {
if ( value.uid === uid ) {
contactList.items[index].unreadmessages = value.unreadmessages + 1;
}
});
selector.addClass("cmbadge");
contactList.update();
}
// clear badge - remove class "cmbadge" and set unreadmessages to 0
function badgeClear(uid) {
var selector = $$('li[data-contact-uid="'+uid+'"] .item-media');
contactList.items.forEach(function (value, index) {
if ( value.uid === uid ) {
contactList.items[index].unreadmessages = 0;
}
});
selector.removeClass('cmbadge');
}
Contact list is rendered correctly, but when I try to increase the “unreadmessages” in contactList.items[index_of_contact].unreadmessages
it won’t update the attribute “data-badge”.
But meanwhile I can add or remove class “cmbadge” and that works.
Any ideas?
Thanks