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

3 つの問題が見つかりました。1) $("#output").html(template(tableData)); のように、テンプレート (tableData) を DOM 要素に設定する必要があります。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 に答える