Question

我已经按照this教程中的编辑示例，设法为我的网页实现了类似的行为，但是有一个问题，我不明白为什么会发生这种情况。每次单击“编辑”按钮或“删除”按钮时，与这些按钮关联的列表视图上的元素将从列表中消失。这是我用于显示列表视图的javascript函数：

function swapDiv(e) {
    selection = e.value;
    var url = '';
    switch (selection) { //check from which endpoint I will be loading the contents for the list view
        case 'Usuarios':
            url = "http://127.0.0.1:81/SismosService.svc/usuario/index";
            template = '#usuariosTemplate';
            break;
        case 'Regiones':
            url = "http://127.0.0.1:81/SismosService.svc/region/index";
            template = '#regionesTemplate';
            break;
        case 'Clusters':
            url = "http://127.0.0.1:81/SismosService.svc/cluster/index";
            template = '#clustersTemplate';
            break;
        case 'Dispositivos':
            url = "http://127.0.0.1:81/SismosService.svc/dispositivo/index";
            template = '#dispositivosTemplate';
            break;
        case 'Eventos':
            url = "http://127.0.0.1:81/SismosService.svc/evento/index";
            template = '#eventosTemplate';
            break;
    }
    $.ajax({ //make the ajax call to load the contents for the list view
        url: url,
        success: function (data) {
            var src = null;
            if (template == '#eventosTemplate')
            {
                src = getEventosArray(data); //the controls displayed for this kind of data are different from the rest
            }
            else
            {
                src = data.Response; 
            }
            var ds = new kendo.data.DataSource({
                data: src
            });
            $('#listView').kendoListView({ //create the kendo ui list view
                dataSource: ds,
                template: kendo.template($(template).html())
            });
        },
        error: function (data) {
            console.log('Error: ' + JSON.stringify(data));
        }
    });
    //animate the div where the list view and other controls are displayed
    $('#selectionBar').animate({
        left : '189'
    }, 500);
    $('#dataBar').animate({
        left: '0'
    }, 500);
    $('#myMap').animate({
        left : '370'
    }, 500);
}

我为列表视图定义的模板位于this链接中。最后这是我的观点：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
    <script src="<%: Url.Content("~/Scripts/index/templateLoader.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>

<%-- here goes my templates but for space reasons and to provide a more clean reading I put the templates separately --%>


</head>
<body onload="GetMap();">
    <div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; ">
        <div id="mainDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; ">
            <div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:20">
                <button id="btnUsuarios" value="Usuarios" style="position: absolute;left: 10px; right: 10px; top: 10px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Usuarios</button><br />
                <button id="btnRegiones" value="Regiones" style="position: absolute;left: 10px; right: 10px; top: 70px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Regiones</button><br />
                <button id="btnClusters" value="Clusters" style="position: absolute;left: 10px; right: 10px; top: 130px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Clusters</button><br />
                <button id="btnDispositivos" value="Dispositivos" style="position: absolute;left: 10px; right: 10px; top: 190px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Dispositivos</button><br />
                <button id="btnEventos" value="Eventos" style="position: absolute;left: 10px; right: 10px; top: 250px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Eventos</button><br />
            </div>
            <div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
                <div class="k-toolbar k-grid-toolbar">
                    <button class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
                </div>
                <div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
                <div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id='myMap' style="border: thin solid black; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; "></div>
        </div>
    </div>
</body>
</html>

我的列表视图内容消失的原因是什么？它是嵌入在Kendo UI List View控件中的行为吗？我该如何避免这种行为？

感谢您的帮助。

Answer 1

有一些情况会使元素消失。典型的是：

DataSource定义中没有update模式。
id定义中没有model（甚至DataSource）。

从您的DataSource我发现没有model定义。

修改

在this example我已经使用模型定义了一个Grid，但我在模型中评论了id定义。如果您点击edit按钮然后点击cancel，您会看到该行消失。

评论id定义：

schema : { model: { // id : "symbol", fields: { symbol: { type: "string" }, price : { type: "number" }, shares: { type: "number" }, total : { type: "number" } } } },

现在，删除id定义中的注释并重复测试，您将看到现在该行未从网格中删除。

schema : { model: { id : "symbol", fields: { symbol: { type: "string" }, price : { type: "number" }, shares: { type: "number" }, total : { type: "number" } } } },

修改：

似乎您在定义中缺少版本模板。对于usuariosTemplate，它应该是这样的：

<script type="text/x-kendo-tmpl" id="usuariosTemplateEdit"> <div class="product-view"> <dl> <dt>Usuario</dt> <dd> <input type="text" data-bind="value:Nombre" name="Nombre" required="required"/> <input type="text" data-bind="value: ApellidoP" name="ApellidoP" required="required" /> <input type="text" data-bind="value: ApellidoM" name="ApellidoM" required="required" /> </dd> </dl> <div class="edit-buttons"> <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a> <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a> </div> </div> </script>

并且您还应该更改代码以在listView初始化中添加额外选项：

用于usuarios的listView示例（硬编码版本）。

$('#listView').kendoListView({ dataSource : ds, template : kendo.template($('#usuariosTemplate').html()), editTemplate: kendo.template($('#usuariosTemplateEdit').html()) });

当我点击它们时，为什么我的KendoUI ListView的内容会消失？

1 个答案: