knockout js force rebind after sorting array items

Question

Having trouble with knockout js. But seems to me it's a bug. Maybe there are some workaround.

There is an example of sorting list here and it works. And there is another example and it doesn't. The only difference between them is version of KO.

Any help would be appreciated.

Update: I don't know the reason but after calling splice method KO refreshes binding in some incorrect way. So the workaround I've found - force rebind array model.

The code I use to force rebinding is follows:

        // newArray is ko.observableArray([...])
        var original = newArray();
        newArray([]);
        newArray(original); // KO will rebind this array

Is there more elegant way to force rebinding?

I'm not sure what you are expecting, but I see exactly the same behaviour in both pages. — Matthew Schinckel
– Matthew Schinckel, Commented Jun 11, 2012 at 11:01

Steve Greatrex · Accepted Answer · 2012-06-11 11:53:59Z

I believe what is happening here is that Knockout 2.1 is correctly updating the list when you splice the new item into it, but the jQuery UI sortable implementation is also adding the item to the new list.

To get around this I added a 'dragged' class to the item that gets added by the sortable implementation, and then removed it once I updated the two arrays (which causes the UI update as expected).

    $list
      .data('ko-sort-array', array)
      .sortable(config)
      .bind('sortstart', function (event, ui) {                  
        ui.item.data('ko-sort-array', array);
        ui.item.data('ko-sort-index', ui.item.index());
        ui.item.addClass('dragged'); // <-- add class here
      })
      .bind('sortupdate', function (event, ui) {
        var $newList = ui.item.parent();
        if($newList[0] != $list[0]){ return; }

        var oldArray = ui.item.data('ko-sort-array');
        var oldIndex = ui.item.data('ko-sort-index');

        var newArray = $newList.data('ko-sort-array');
        var newIndex = ui.item.index();

        var item = oldArray.splice(oldIndex, 1)[0];
        newArray.splice(newIndex, 0, item);
        $list.find('.dragged').remove(); // <-- remove the item added by jQuery here
      });

You can see this working here

Collectives™ on Stack Overflow

knockout js force rebind after sorting array items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related