Kendo ui 剑道UI MVVM与剑道UI拖放

我正在尝试使用剑道UI MVVM框架和剑道UI拖放机制；但我很难找到如何从

可拖动对象中删除数据的方法

我的代码是这样的

var viewModel = kendo.observable {
    Cart : [],
    Items : [
    {
      Id : "item/10",
      Name: "CD ROM"
    },
    {
      Id : "item/11",
      Name: "DVD ROM"
    }
};

所以我有一个粗略的模板绑定

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div data-bind="text: Name"></div>
    </li>
</script>

现在在javascript中，我将可用的
购物项目
div转换为一个
可拖动的

    $("body").kendoDraggable({
        hint: function (target) {
            return $(target).clone().addClass("draggable");
        },
        filter: ".draggable"
    });

最后，我初始化drop目标

    $("#droptarget").kendoDropTarget({
        drop: droptargetOnDrop
    });

但在我的代码中，我似乎无法获得关于被删除项目的实际数据

    function droptargetOnDrop(e) {
        console.log(e);
        $("#droptarget").text("You did great!");
        $(".draggable").removeClass("hollow");
    }

正在删除的项目的数据由
droptargetOnDrop
作为
e.draggable.currentTarget
接收

如果要将项目移动到目标区域，应执行以下操作：

$("#droptarget").append(e.draggable.currentTarget);

注意：这样做，您将移动项目。如果要附加副本，应附加节点的克隆：

 $("#droptarget").append($(e.draggable.currentTarget).clone());

编辑：为了在不使用kendoDataSource的情况下获取数据项，我建议将模板更改为：

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable" data-id="${Id}">
        <div data-bind="text: Name"></div>
    </li>
</script>

编辑如果您决定使用
kendoListView
您应该将模板定义为：

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div>${Name}</div>
    </li>
</script>

最后是
droptargetOnDrop
函数：

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var item = list.dataSource.getByUid(dom.data("uid"));
    alert("Found : " + JSON.stringify(item));
}

这实际上是移动项和底层数据，还是只移动DOM节点？我最关心的是实际的数据，因为它需要通过视图模型传递，这样服务器端的事情才能发生。我仍然无法访问作为视图模型一部分的基础对象的实际数据。“数据”是项目的名称和Id，而不是DOM元素。是否可以将可用的购物项目定义为剑道UI列表视图？我不这么认为。我真的很想避免使用它。这是唯一可能的办法吗？
<script id="products-template" type="text/x-kendo-template">
    <li class="draggable" data-id="${Id}">
        <div data-bind="text: Name"></div>
    </li>
</script>

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var id = $(dom).data("id");
    var items = viewModel.Items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].Id == id) {
            alert("Found : " + JSON.stringify(items[i]));
            break;
        }
    }
}

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div>${Name}</div>
    </li>
</script>

var list = $("#shopping-items-available > ul").kendoListView({
    template  : $("#products-template").html(),
    dataSource: viewModel.Items
}).data("kendoListView");

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var item = list.dataSource.getByUid(dom.data("uid"));
    alert("Found : " + JSON.stringify(item));
}