Kendo ui 剑道可排序与剑道可观测数组_Kendo Ui

Kendo ui 剑道可排序与剑道可观测数组

kendo-ui

Kendo ui 剑道可排序与剑道可观测数组,kendo-ui,Kendo Ui,我使用的是剑道可排序数据源是剑道可观测数组，在对div进行排序时，我们正在更新change事件中的数组对象，但数组正在正确更新，但ui未更新。你能帮帮我吗 <!DOCTYPE html> <html> <head> <title></title> <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel

我使用的是剑道可排序数据源是剑道可观测数组，在对div进行排序时，我们正在更新change事件中的数组对象，但数组正在正确更新，但ui未更新。你能帮帮我吗

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>
<body>
    <div id="example">
        <div id="playlist">
            <ul id="sortable-basic" data-bind="source:items" data-template="template">
            </ul>
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <li class="sortable">#:value#<span>#:time#</span></li>
        </script>
        <script>
            var data;
            $(document).ready(function () {

                data = kendo.observable({
                    items: new kendo.data.ObservableArray([
                        { value: 'Papercut', time: '3:12' },
                        { value: 'One Step Closer ', time: '4:10' },
                        { value: 'With You ', time: '5:00' },
                        { value: 'Points of Authority ', time: '2:59' }]
                        )
                });
                kendo.bind($('#playlist'), data);

                $("#sortable-basic").kendoSortable({
                    change: function (e) {
                        var daa = data.items.splice(e.oldIndex, 1);
                        data.items.splice(e.newIndex, 0, daa[0]);                        
                    }
                });
            });
        </script>
        <style>
            #example
            {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            #playlist
            {
                margin: 30px auto;
                width: 300px;
                background-color: #f3f5f7;
                border-radius: 4px;
                border: 1px solid rgba(0,0,0,.1);
            }

            #playlist-title
            {
                height: 80px;
                border-radius: 4px 4px 0 0;
                border-bottom: 1px solid rgba(0,0,0,.1);
            }

                #playlist-title span
                {
                    display: none;
                }

            #sortable-basic
            {
                padding: 0;
                margin: 0;
            }

            li.sortable
            {
                list-style-type: none;
                padding: 6px 8px;
                margin: 0;
                color: #666;
                font-size: 1.2em;
            }

                li.sortable:last-child
                {
                    border-bottom: 0;
                    border-radius: 0 0 4px 4px;
                }

                li.sortable span
                {
                    display: block;
                    float: right;
                    color: #666;
                }

                li.sortable:hover
                {
                    background-color: #dceffd;
                }

            li.hint
            {
                display: block;
                width: 200px;
                background-color: #52aef7;
                color: #fff;
            }

                li.hint:after
                {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 6px solid transparent;
                    border-bottom: 6px solid transparent;
                    border-left: 6px solid #52aef7;
                    position: absolute;
                    left: 216px;
                    top: 8px;
                }

                li.hint:last-child
                {
                    border-radius: 4px;
                }

                li.hint span
                {
                    color: #fff;
                }

            li.placeholder
            {
                background-color: #dceffd;
                color: #52aef7;
                text-align: right;
            }
        </style>
    </div>
</body>
</html>




#：值##：时间#
var数据；
$（文档）.ready（函数（）{
数据=剑道。可观察({
项目：新剑道.data.ObservableArray([
{值：'Papercut'，时间：'3:12'}，
{值：'更近一步'，时间：'4:10'}，
{值：'和你在一起'，时间：'5:00'}，
{值：'权限点'，时间：'2:59'}]
)
});
bind（$（'#playlist'），数据）；
$（“#可排序基本”）.kendoSortable({
更改：功能（e）{
var daa=数据项拼接（如oldIndex，1）；
数据项拼接（e.newIndex，0，daa[0]）；
}
});
});
#范例
{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#播放列表
{
保证金：30像素自动；
宽度：300px；
背景色：#f3f5f7；
边界半径：4px；
边框：1px实心rgba（0,0,0,1）；
}
#播放列表标题
{
高度：80px；
边界半径：4px4p0；
边框底部：1px实心rgba（0,0,0,1）；
}
#播放列表标题范围
{
显示：无；
}
#可排序基本
{
填充：0；
保证金：0；
}
可排序的
{
列表样式类型：无；
填充：6px 8px；
保证金：0；
颜色：#666；
字体大小：1.2米；
}
李：最后一个孩子
{
边界底部：0；
边界半径：0 0 4px 4px；
}
可排序跨度
{
显示：块；
浮动：对；
颜色：#666；
}
分类：悬停
{
背景色：#dceffd；
}
提示
{
显示：块；
宽度：200px；
背景色：#52aef7；
颜色：#fff；
}
提示：之后
{
内容：“；
显示：块；
宽度：0；
身高：0；
边框顶部：6px实心透明；
边框底部：6px实心透明；
左边框：6px实心#52aef7；
位置：绝对位置；
左：216px；
顶部：8px；
}
提示：最后一个孩子
{
边界半径：4px；
}
李彦宏
{
颜色：#fff；
}
li.占位符
{
背景色：#dceffd；
颜色：#52aef7；
文本对齐：右对齐；
}

我想我发现了你的问题。这似乎是更改函数，只需删除它，您就可以对列表进行排序。

我没有使用kendoSortable，但我假设它已经在维护数组排序，因为您已将数组绑定到kendoSortable。这就是绑定的目的，它为您保持数据和元素的同步。您在change事件中所做的只是撤消绑定刚刚完成的工作，即对元素和绑定数组进行排序

根据telerik，

您必须手动执行此操作，而将可排序表附加到数组不会自动执行任何操作。所以你们所做的是正确的，然而，即使你们的变化在可观察数组中正确反映，它也不会出现在屏幕上

所以我们必须触发clear and change事件，以便将UI与阵列同步。也许有一种更好的方法可以在不清除数组的情况下调用sync，但这是一种对我有效的方法

下面是一个示例代码，我们在其中清除数组，然后重新插入，从而解决了问题

    $("#sortable-basic").kendoSortable({
                change: function (e) {
                    var daa = data.items.splice(e.oldIndex, 1);
                    data.items.splice(e.newIndex, 0, daa[0]);
                    var copiedArray = data.items.splice(0, data.items.length);
                    $.each(copiedArray,
                        function (index, item) {
                            data.items.push(item);
                        });

                }
            });

Hi Hinogi，你是对的，如果我删除了更改事件，它工作正常。但我希望我的可观察数组项也会根据divs排序进行更改。