KnockoutJs & Jquery Listview dynamic dividers wont update UI

Question

Disclaimer: This is my first post on stack overflow so bear with me if I didn't provide enough information.

The question: I am trying to have a dynamic amount of a dividers in a listview that was populated using knockout JS observable array. I can add the dividers in and then sort the list but whenever I do a bulk remove of "finished" items (this is a to do list) they do not get removed. The knockout model is updated but the UI won't update. If I don't use dividers then everything works just peachy. The basic feature I am trying to achieve is that there is a list with a dynamic number of dividers and I can move items between the dividers. I think it is something to do with the sorting of items

What I have tried: -The use of listview('refresh') and triggering page create -Containerless control - works great with sorting and removing single item but bulk remove of items does not update UI. -Special binding handlers to attempt to handle list views differently -use of jquery auto-dividers however this does not sort the list so I get multiples of the same dividers. -combination of autodividers and foreach: items.sort(etc...)

<ol data-role="listview" data-divider-theme="b" id="ToDoListView" data-autodividers="true" data-inset="true" data-bind="foreach: items.sort(function(l,r) {return l.finished() ? 1 : 0})" >

..li elements exist here etc..

  $("#ToDoListView").listview({
            autodividers: true,
            autodividersSelector: function (li) {
                return $(li).hasClass('finishedItem') ? "Done:" : "To Do:";
            }
        });

I have tried many solutions online for a couple of days but I cannot seem to be able to have dynamic dividers and be able to move content between the dividers. It would be easier if I didnt have to sort them after I move them between divider sections... but once something is moved to a different divider it would then need to be sorted within that divider. I want to avoid making seperate lists/observables for each different category. There have been a lot of solutions offered on stack overflow and they work in those simple cases, but not in mine.

yup. already using the .listview('refresh'). It works in most cases to update the UI but after the dividers are added dynamically and mixed in with the foreach toDo LI elements it won't update ui — Simon Taylor
Have you tried $('.selector').listview().listview('refresh'); — Omar

Shalom Aleichem Shalom Aleichem · Accepted Answer · 2013-06-17T04:22:41

I would recommend you using knockout subscribe to update dividers whenever your observableArray is changed and refresh listview contents:

items.subscribe(function (newItems) {
    $("#toDoList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            return $(li).hasClass('finished') ? "Done:" : "To Do:";
        }
    }).listview("refresh");
});

To maintain your list in the sorted state you should update the observableArray with already sorted value when you push/delete something to/from it:

var itemsArray = items();
itemsArray.push(newItem);
itemsArray.sort();
items(itemsArray);

This will save you from updating the UI multiple times.

KnockoutJs & Jquery Listview dynamic dividers wont update UI

1 Answers