kendo可排序小部件mvvm UI故障

Question

我正在使用kendo的mvvm和sortable小部件，以允許用戶對綁定了數據的多個表進行排序。 我已經實現了以下代碼。 它可以工作，但是數據似乎已正確記錄到控制台。 但是，UI中的數據會跳來跳去。

$(".sortable-handlers").kendoSortable({
    handler: ".move",
    hint:function(element) {
        return element.clone().addClass("sortable-hint");
    },
    change: function(e) {
        var services = viewModel.get("services");
        console.log(e.oldIndex);
        var oldIndex = e.oldIndex;
        var newIndex = e.newIndex;

        services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);

        //Set it back to the original list
        viewModel.set("services", services);

        console.log(JSON.stringify(viewModel.get("services")));

    }
});

Answer 1

已經很長時間了，但是添加.trigger("change")對我.trigger("change")我使用的是jQuery ui sortable而不是kendo ui sortable）。

 // Define model with dependent method var MyModel = kendo.data.Model.define({ fields: { left: "number", right: "number" }, total: function() { return this.get("left") + this.get("right"); } }); // Create view model var viewModel = kendo.observable({ items: [] }); // bindings kendo.bind($("#myView"), viewModel); // using $.ui.sortable when list changes var timeout = null; viewModel.items.bind("change", function(e) { clearTimeout(timeout); timeout = setTimeout(function() { $("#sortable").sortable({ update: function(e, ui) { // get UID of sorting target var targetUid = ui.item.attr("uid"); // list before var beforeIndexes = _.map(viewModel.items, _.iteratee("uid")); // target's original index var fromIdx = _.indexOf(beforeIndexes, targetUid); // list after var afterIndexes = $("#sortable").sortable("toArray", { attribute: "uid" }); // target's new index var toIdx = _.indexOf(afterIndexes, targetUid); var changeItem = viewModel.items[fromIdx]; viewModel.items.splice(fromIdx, 1); if (toIdx >= viewModel.items.length) { viewModel.items.push(changeItem); } else { viewModel.items.splice(toIdx, 0, changeItem); } // refresh viewModel.items.trigger("change"); } }); }, 500); }); // add some items to list viewModel.items.push(new MyModel({ left: 1, right: 2 })); viewModel.items.push(new MyModel({ left: 6, right: 3 })); viewModel.items.push(new MyModel({ left: 5, right: 7 })); 

 <link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script> <script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script> <script src="http://underscorejs.org/underscore-min.js"></script> <div id="myView"> <div class="k-grid k-widget"> <div class="k-grid-header"> <div class="k-grid-header-wrap"> <table> <thead> <tr> <th class="k-header">SORTABLE</th> </tr> </thead> </table> </div> </div> <div class="k-grid-content"> <table> <tbody id="sortable" data-bind="source: items" data-template="template-item"> </tbody> </table> </div> </div> <div class="k-grid k-widget"> <div class="k-grid-header"> <div class="k-grid-header-wrap"> <table> <thead> <tr> <th class="k-header">NOT-SORTABLE</th> </tr> </thead> </table> </div> </div> <div class="k-grid-content"> <table> <tbody id="sortable" data-bind="source: items" data-template="template-item"> </tbody> </table> </div> </div> </div> <script type="text/x-kendo-template" id="template-item"> <tr data-bind="attr: {uid: uid}"> <td> <span data-bind="text: left" />+ <span data-bind="text: right" />= <span data-bind="text: total" /> </td> </tr> </script>