Question

我试图这样做，当点击listview项时，会出现一个对象的模态视图，其中包含所有细节。我试图找出如何引用点击的listview项目，我有点难过。 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

首先：您可以将set 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>

打开listview项目kendo ui的详细视图

1 个答案: