UI doesn't fully update with KnockoutJS and JqueryUI Sortable

Question

First of all sorry for my bad english!

Anyway I'm trying to make a simple task manager based on Knockout JS and Jquery UI. After some research I found a little plugin that helps to connect KO with JqueryUi's sortable, you can read about it here: http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html

The plugin works quite well updating the order of the observable array but I also needed to refresh some values of the elements based on their position inside the array. I tried to update the whole array after each sorting and I noticed a strange behavior: while the UI remains the same, if I send the array to JSON it is updated with the right values!

You can find a snippet of my code here: http://jsfiddle.net/ingro/mz3MK/

Try to move some elements in the Sortable list and then see the differences between the UI and the values displayed with the "Print" button.

EDIT: Try to pull the first element (test#1) to the bottom of the sortable list. The attribute 'time' of the element remain the same (07:00). Now take it to the second spot of the sortable list and you notice that the attribute 'time' became "10:00"! In fact the UI is only refreshed when you drag something around, and only the element that is dragged is refreshed to the state that it was BEFORE the dragging. But if you print the values of the array, you can see that it is ALWAYS refreshed :\

Thanks to anyone that can help me on this!

Answer 1

As I understood the problem, you need to make time and title observable. Consider updated jsfiddle

var Post = function( time, title) {
    this.time = ko.observable( time );
    this.title = ko.observable( title );
};

then

self.posts = ko.observableArray( ko.utils.arrayMap( posts , function( post ) {
        return new Post( post.time, post.title);
}));

and then you are able to use observable update syntax:

post.time(self.times()[count]);

Also you may find helpful this knockout todo app example TodoApp

Answer 2

You need to make the time property in posts observable, and change the way you update it, as in this fiddle :

Before:

self.posts = ko.observableArray([
    {time: "07:00", title: "test#1"},
    {time: "08:00", title: "work#2"},     
    {time: "09:00", title: "task#3"},    
    {time: "10:00", title: "sleep#4"}
]);

. .

post.time = self.times()[count];

After:

self.posts = ko.observableArray([
    {time: ko.observable("07:00"), title: "test#1"},
    {time: ko.observable("08:00"), title: "work#2"},     
    {time: ko.observable("09:00"), title: "task#3"},    
    {time: ko.observable("10:00"), title: "sleep#4"}
]);

. .

post.time(self.times()[count]);

The reason for this is that the binding of the text to display in that span will only evaluate once since the property is not observable.