使用jQuery UI的Knockoutjs可排序

我正在与Google Groups在Knockout的论坛上寻求帮助 - 但我认为更多的观众永远不会伤害到这种情况。使用jQuery UI的Knockoutjs可排序

我想让KO与使用jQuery UI的'可排序'插件的情况一起工作。我在这里发布了我的代码。

http://www.pastie.org/1285716

尝试使用自定义绑定...

 ko.bindingHandlers.onReceiveItem = { 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
       $(element).bind("sortreceive", function (event, ui) { 
        ko.bindingHandlers.onReceiveItem.update(element, valueAccessor, allBindingsAccessor, viewModel); 
       }); 
      }, 
      update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
       var value = ko.utils.unwrapObservable(valueAccessor()); 
       var bindings = allBindingsAccessor(); 
      } 
     };

的目标是，当排序列表接收一个项目，它可以得到的项目，并把它添加到其他observableArray。

虽然这对我来说不太合适。我很难让事件像我想要的那样开火。我设置它的方式会触发，但它只会返回“真/假”值。我希望别人可能对我做错了什么有所了解，并知道如何解决它。

（使用的代码，你需要引用

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="Stylesheet" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>

在顶部，然后将最新版本的基因敲除（1.1.1）

http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.1.debug.js

来源

2010-11-10 Ciel

[https://github.com/rniemeyer/knockout-sortable](https://github.com/rniemeyer/knockout-sortable）Knockout.js 2.0这是一个很大的实现。 – Joe 2014-07-14 15:50:00

我没有在完成之前我就明白了Steve had already answered this这里你可以看到，虽然方式与他略有不同

Sortable使得这难度更大，通过绑定到每个产品的拖放绑定，d变得更加容易。可排序的问题是你绑定了整个列表而不是项目。

http://www.pastie.org/1432093

来源

2011-01-05 20:32:14 madcapnmckay

谢谢，我也要感谢史蒂夫。我从来没有收到过他回复的电子邮件 - 所以我认为它刚刚走到了一边。我想我忘了订阅线程。这个例子非常有帮助，并且可以为我节省大量时间。 – Ciel 2011-01-06 13:59:22

应该指出，这是一个KO 1.0解决方案，许多事情因此而改变。瑞安尼迈耶已经重新排序后KO 2到这个[固体插件]（http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html） – madcapnmckay 2012-05-17 16:25:47

我修改了样品，并用几乎完全bindingHandler来了，它不需要id属性并且还处理重新排序。下面的代码：

http://jsbin.com/knockoutsortable/20/edit

用法：

它使用template.foreach结合，找出什么在视图模型关联数组。
您可以使用databind =“foreach：Products，sortable：true”来启用在没有选项的单个数组内进行排序。
它使用observableArray对象。
它构建了可自行排序的jQuery，您可以在绑定中传递与jQuery.sortable构造函数中相同的options对象。

来源

2011-11-05 14:59:13 Guillaume86

这是一个很好的答案。我可以通过在newArray.splice调用之后添加下面的代码来改变排序顺序： $（viewModel.items（））。each（function（index）{ \t var newSortOrder = index + 1; \t var thisItem = viewModel.items（）[index]; \t thisItem.sortOrder（newSortOrder）; }）; – Reaction21 2012-01-06 23:32:07

@ Guillaume86很抱歉，您的解决方案与Knockout> v3.1.0不兼容物品在排序时会出现两次消失 – RHAD 2014-09-23 14:32:25

@Richard对不起，我在几年前转向了棱角状态，因此我不再使用淘汰赛了 – Guillaume86 2014-09-29 12:39:14

使用jQuery UI的Knockoutjs可排序

回答

相关问题