2

我正在尝试使用 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>
4

1 回答 1

3

我发现了三个问题： 1) template(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>

于 2012-11-12T19:32:04.590 回答