我在某个Web项目中使用了出色的敲门js库以及jQuery和jQuery-UI。
在我的应用程序的特殊视图中,我列出了一组任务。这些任务应该是可排序的,因此我想到了jQuery-UI的sorted-widget。当我也在使用Knockout时,我发现Ryan Niemeyer的这个非常有用的库叫做knockout-sortable,它结合了jQuery-sortable和Knockout函数。
在<ul>
元素中列出任务是没有问题的,也可以在完美的工作环境中移动相应的<li>
元素。
<div class="container" data-bind="sortable: tasks">
<div class="item" data-bind="css: {highlight:marked}">
<span>
<p>
<span data-bind="text: id"></span>:
<span data-bind="text: name"></span>
</p>
</span>
</div>
</div>
但是我需要一个特殊的功能:每次将某个任务在列表中上移或下移时,列表中的predecessors-task的所有ID均应保存到单独的数组(predecessors-array)中。更清楚地说:在修改列表的哪个任务/
<li>
条目之前,我需要提供信息,因为我想稍后对位置[0..<highestIndexOfMovedTask>]
中的任务进行一些操作。为此,我将所有先前的任务ID保存在单独的数组中。因此,我在Niemeyer的淘汰赛可排序函数的“ afterMove”功能中执行此操作。这可以正常工作,并且所有ID均保存到predecessors-array中。
ko.bindingHandlers.sortable.afterMove = function(obj){
var targetIdx = obj.targetIndex+1;
if(targetIdx>viewModel.highestTargetId()){
viewModel.highestTargetId(targetIdx);
}
var allItemsUntilTarget = viewModel.tasks().slice(0, viewModel.highestTargetId());
var itemIdsUntilTarget = $.map(allItemsUntilTarget, function(elem, idx){return elem.id()});
var oldProducts = viewModel.includeIds.removeAll();
ko.utils.arrayPushAll(viewModel.includeIds, itemIdsUntilTarget);
};
下一步使之变得复杂:当然,应该以可视方式表示ID在predecessors-array中的所有任务。为此,在每个任务上都有一个称为“已标记”的计算可观察属性,用于检查自己的ID是否在predecessors-array中。每当任务在列表中移动时,无论任务是否位于predecessors数组中,标记属性都会重新计算为true / false。
这也可以正常工作,但是如果我将CSS类绑定到标记属性,以直观地表明此任务位于predecessors-array中,则不会更新CSS。我昨天尝试了5小时,并做了很多研究,但我没有提出解决方案。虽然模型已正确更新(可以通过chrome的开发者控制台检查),但视图不是。
也许有人可以帮我解决这个问题?我在这里发布了一些测试代码:http://jsfiddle.net/njLrxhd5/3
任何帮助都非常欢迎!谢谢..
编辑:感谢您的第一个答案。初步外观:
将初始
53:Fix car
移到456:fix fence
后的位置4后,我的预期结果应该是:因此,如果所有任务在任务数组中的位置比移到数组中最高位置的任务的位置低,则应将其标记属性设置为
true
。MVVM的视图模型已经正确响应,但是视图没有更新。
最佳答案
搬家之前
移动465之后:dog狗UI就是这样
根据您的评论更新了输出:
小提琴:http://jsfiddle.net/njLrxhd5/26/
在你走后
/*Reset the array so that UI sortable is refreshed */
var array= ko.toJS(viewModel.tasks);
viewModel.tasks.removeAll();
viewModel.tasks(array);
基本上,它会重新填充任务数组,以便刷新可排序的UI。
请注意:
可能存在某种有效的方式来进行此类更新(例如,父级订阅子级,或者在可剔除可排序项中可能有某些选择)。我只是在测试更新功能
关于jquery - Knockout.js:来自oberservableArray的可 knockout 的可排序CSS更新,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26605067/