Question

我正在尝试使用Kendo-UI模板来显示JavaScript数组中的值，但HTML中没有出现任何内容。

<script id="javascriptTemplate" type="text/x-kendo-template">
    <table>
        # for (var i = 0; i < tableData.length; i++) { #
            <tr><td>#: tableData[i]#</td></tr>    
        # } #
     </table>
</script>
<script type="text/javascript">
    var template = kendo.template($("#javascriptTemplate").html());
    var tableData = ["1", "2"];
    template(tableData);
</script>

Answer 1

我发现了三个问题：1）模板（tableData）必须设置为DOM元素，如$（“＃output”）。html（template（tableData））; 2）模板内的变量名必须是数据; 3）加载模板的代码必须在DOM准备好后执行。以下是完整且更正的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" />
    <link href="Content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var template = kendo.template($("#javascriptTemplate").html());
            var tableData = ["1", "2"];
            $("#output").html(template(tableData));
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="output"></div>
        <script id="javascriptTemplate" type="text/x-kendo-template">
            <table>
            # for (var i = 0; i < data.length; i++) { #
                <tr><td>#=data[i]#</td</tr>  
            # } #
            </table>
       </script>            
    </form>
</body>

为什么没有来自Kendo-UI模板的输出？

1 个答案: