打開一個列表視圖項目的詳細視圖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>