打开一个列表视图项目的详细视图kendo ui

Question

我正在尝试拥有它，所以当一个列表视图项被点击时，一个模式视图出现在其内的所有细节。我试图找出如何引用点击列表视图项目，我很难过。 This JS Fiddle与我的listview设置相同。 关于如何引用被点击的项目的任何帮助将是超级的。

我已经发现了一些文件是这样的事情，但即时通讯努力理解的JavaScript

var lvData = $('#eventFeed').data('kendoListView'); 
    var index = $(this).parents('.event:first').index() + lvData.eventInfo._skip; 

    var itemInfo = lvData.eventInfo._data[index]; 
    $('<div id="eventInfo"></div>').appendTo(document.body); 
    $('views/eventInfo').kendoWindow(); 

Answer 1

第一：你可以得到一套ID作为这样的标志：

<a data-role="button" class="view" data-click="onClick" id="#=id#">Details</a> 

秒：您可以使用Kendo模板将数据传递到您的模板：http://docs.kendoui.com/getting-started/framework/templates/overview

<div id="modal" data-role="modalview" style="width: 95%; height: 95%;"> 
</div> 

<script id="javascriptTemplate" type="text/x-kendo-template"> 
    <ul> 
    #=data['indexKey']# 
    </ul> 
</script> 

<script type="text/javascript"> 
    function onclick(e) 
    { 
     var dataSet = $('#eventfeed').data("kendoMobileListView").dataSource._pristine; //raw data-source 
     var currentData; 
     var curID = e.sender.element.attr('id'); 
     for(var i=0; i < dataSet.length; i++) 
     { 
      if(dataSet[i].id == curID) 
      { 
       currentData = dataSet[i]; 
       break; 
      }   
     } 
     var template = kendo.template($("#javascriptTemplate").html()); 
     var htmlCode = template(currentData); //Execute the template 
     $("#modal").html(htmlCode); //Append the result 
     $("#modal").data("kendoMobileModalView").open(); 
    } 
</script> 

如果你的数据没有任何ID，那么你可以使用UID（这是由剑道的UI自动生成）。所以，你可以通过这种方式获得的数据集：

$('#eventfeed').data("kendoMobileListView").dataSource._data 

那么你的代码是这样的：

<script type="text/javascript"> 
    function onclick(e) 
    { 
     var dataSet = $('#eventfeed').data("kendoMobileListView").dataSource._data; 
     var currentData; 
     var curUID = e.sender.element.closest('li').attr('data-uid'); 
     for(var i=0; i < dataSet.length; i++) 
     { 
      if(dataSet[i].uid == curUID) 
      { 
       currentData = dataSet[i]; 
       break; 
      }   
     } 
     var template = kendo.template($("#javascriptTemplate").html()); 
     var htmlCode = template(currentData); //Execute the template 
     $("#modal").html(htmlCode); //Append the result 
     $("#modal").data("kendoMobileModalView").open(); 
    } 
</script>