listview - Kendo UI ListView 双击选中的项目

Question

我试图在用户双击后从 KendoUI ListItem 的模板中获取名称。我似乎无法找到一种方法来获取所选项目的值(value)。警报返回为未定义。

   <script type="text/x-kendo-tmpl" id="template">
       <div class="machineInstances">
               #:Name# [#:Environment#] #:Description#
        </div>
    </script>

  $("#listView").kendoListView({
      dataSource: dataSource,
      selectable: "single"
      , dataBound: setItemDoubleClickEvent
      , template: kendo.template($("#template").html())

   });

  function setItemDoubleClickEvent() {
      var items = $(".machineInstances");
      items.dblclick(function () {
              $("#menuInstances").click();
              var selected = $("#listView").data("kendoListView").select();
              alert(selected.Name);
               alert("Double Click!");
              });
      }

谢谢，

德鲁

Answer 1

在 Kendo UI ListView 中，select 不返回项目而是返回 HTML。您应该使用 index() 获取所选元素的索引，并使用 dataSource.view() 检索当前显示的元素。

您的代码应该是:

function setItemDoubleClickEvent() {
    var items = $(".machineInstances");
    items.dblclick(function () {
        $("#menuInstances").click();
        var listView = $("#listView").data("kendoListView");
        var idx = listView.select().index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

但我建议将代码简化为:

function setItemDoubleClickEvent() {
    $(".machineInstances").on("dblclick", function () {
        var listView = $("#listView").data("kendoListView");
        var idx = $(this).index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

或者使用完全不同的策略来获得相同的结果:

var listView = $("#listView").data("kendoListView");
function setItemDoubleClickEvent() {
    $(".machineInstances", listView).on("dblclick", function () {
        var uid = $(this).data("uid");
        var item = listView.dataSource.getByUid(uid);
        alert(item.Name);
        alert("Double Click!");
    });
}

我在其中获取双击元素的 uid，然后使用 getByUid 检索项目数据。

同时将 listView 设置在外部可以防止我们每次执行该函数时都必须计算它。

示例:http://jsfiddle.net/OnaBai/3wQaK/