When I add items to my list (by clicking the "add series" button) it causes my list to not sort properly. E.G. If I click the "add series" button and then try to move "seriesname232" inbetween items "trrde" and "1", then it will move it down one more than it should (below the "1"). I believe that this is because the sortable list isn't taking into account that something was added to it. Below is an example:
http://jsfiddle.net/thebassix/yTAXh/
<div id="results">
---Hidden---
<ul id="hidden" data-bind="sortable: { data: hiddenSeries, afterMove: hide}">
<li data-bind="visible: Hidden, text: Name"></li>
</ul>
---Unhidden---
<ul id="unhidden" data-bind="sortable: { data: unhiddenSeries, afterMove: unhide}">
<li data-bind="visible: !Hidden(), text: Name"></li>
</ul>
</div>
<hr/>
<div>All</div>
<ul data-bind="foreach: series">
<li>
<span data-bind="text: Name"></span> -
(<span data-bind="text: Hidden"></span>)
</li>
</ul>
<input id="btnAddSeries" data-bind="click: addSeries" title="Add Series" class="ews_button" type="button" value="Add Series" />
The issue is that the Series
object that you are adding has _destroy
as an observable. Generally, _destroy
is just a normal property, as the destroy
function of KO set's it as a normal property.
So, your issue will be fixed, if you do not make _destroy
an observable in your Series
constructor like:
self._destroy = data._destroy;
Updated sample: http://jsfiddle.net/rniemeyer/63rup/
Additionally, I just added a fix to the sortable
plugin that will unwrap _destroy
anyways, so this would not have been a problem.