带有 jQuery UI 可排序的 Knockoutjs
Posted
技术标签:
【中文标题】带有 jQuery UI 可排序的 Knockoutjs【英文标题】:Knockoutjs with jQuery UI Sortable 【发布时间】:2011-05-08 00:00:38 【问题描述】:我也在与 Knockout 论坛上的 Google Groups 合作寻求帮助 - 但我认为更大的受众永远不会损害这种情况。
我正在尝试让 KO 使用 jQuery UI 的“Sortable”插件来处理情况。我在这里发布了我的代码。
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();
;
目标是当Sortable List 接收到一个item 时,它可以获取该item 并将它添加到另一个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>
在顶部,然后是最新版本的 Knockout (1.1.1)
http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.1.debug.js
【问题讨论】:
https://github.com/rniemeyer/knockout-sortable Knockout.js 2.0 这是一个很棒的实现。 【参考方案1】:我对示例进行了重新设计,并附带了一个几乎完整的 bindingHandler,它不需要 id 属性,它还可以处理重新排序。代码如下:
http://jsbin.com/knockoutsortable/20/edit
用法:
它使用 template.foreach 绑定来找出 viewModel 中关联的数组是什么。
您可以使用 databind="foreach: Products, sortable: true" 在没有选项的单个数组内启用排序。
它适用于 observableArray 对象。
它自己构建可排序的 jQuery,您可以在绑定中传递与在 jQuery.sortable 构造函数中相同的选项对象。
【讨论】:
这是一个很好的答案。通过在 newArray.splice 调用之后添加以下内容,我能够使用它来更改淘汰赛 observableArray 的排序顺序: $(viewModel.items()).each(function(index) var newSortOrder = index + 1; var thisItem = viewModel.items()[index]; thisItem.sortOrder(newSortOrder); ); @Guillaume86 不幸的是,您的解决方案不适用于 Knockout > v3.1.0 排序时项目消失两次 @Richard 抱歉,几年前我改用了 Angular,我不再使用淘汰赛【参考方案2】:在我完成之前我没有意识到Steve had already answered this。不过,你去吧,与他略有不同。
Sortable 使这变得更加困难,如果将拖放绑定绑定到每个产品,这会容易得多。 sortable 的问题是您绑定的是整个列表而不是项目。
http://www.pastie.org/1432093
【讨论】:
谢谢你,我也需要感谢史蒂夫。我从来没有收到他回复过的电子邮件——所以我认为它只是被搁置了。我想我忘了订阅线程。这个例子非常有帮助,可以节省我很多时间在我需要做的事情上。 应该注意的是,这是一个 KO 1.0 解决方案,此后许多事情都发生了变化。 Ryan Niemeyer 重新审视了将 KO 2 分类到此solid plugin以上是关于带有 jQuery UI 可排序的 Knockoutjs的主要内容,如果未能解决你的问题,请参考以下文章
带有 jQuery UI 对话框、拼写检查和按钮在第二次单击时不起作用的 CKEditor
带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单
带有 jQuery Ajax 调用的 MVC 无法正确绑定空数组/可枚举