Knockoutjs与jQuery UI Sortable

时间:2010-11-10 16:41:19

标签: jquery jquery-ui knockout.js

我正在与Knockout论坛上的Google网上论坛寻求帮助 - 但我认为更多的受众群体永远不会伤害这种情况。

我试图让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();
            }
        };

目标是当可排序列表收到一个项目时,它可以获取该项目并将其添加到另一个observableArray。

但这并不适合我。我很难像我想要的那样让事件发生。我设置它的方式,它确实触发,但它只返回一个'true / false'值。我希望其他人可能知道我做错了什么,知道如何解决它。

(要使用代码,您需要参考

<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

2 个答案:

答案 0 :(得分:16)

我重新设计了示例,并附带了一个几乎完整的bindingHandler,它不需要id属性,它也处理重新排序。这是代码:

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

用法:

  • 它正在使用template.foreach绑定来查找viewModel中关联数组的内容。

  • 您可以使用databind =“foreach:Products,sortable:true”来启用单个数组内的排序,但没有选项。

  • 它正在使用observableArray对象。

  • 它正在构建jQuery可自行排序,您可以在绑定中传递与jQuery.sortable构造函数中相同的选项对象。

答案 1 :(得分:10)

在我结束之前,我没有意识到Steve had already answered this。在这里,你的方式与他略有不同。

Sortable使得这一点变得更加困难,使用绑定到每个产品的拖放绑定会更加容易。 sortable的问题是你绑定整个列表而不是项目。

http://www.pastie.org/1432093