打开一个listview项的详细视图 kendo ui

Question

我正在尝试拥有它，因此当单击列表视图项时，会出现该对象的模式视图，其中包含其所有详细信息。我试图找出如何引用单击的列表视图项目，我有点难过。 This JS Fiddle 与我的列表视图设置相同。 有关如何引用单击的项目的任何帮助都将是超级的。

我找到了一些类似的文档，但我很难理解 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-template 将数据传递给您的模板：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（由kendo-ui 自动生成）。所以可以通过这种方式获取dataSet：

$('#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>