Question

我正在尝试为div动态添加一个类名，它被称为'source'。它正在使用chrome但无法在Internet Explorer或firefox中运行。我试过'＃= source＃'，但它不起作用。

  <script type="text/x-kendo-template" id="singleEntryTemplate">
       <div class="logEntryRow #: source #">
           <span class="entryTime">
               #: entryTime #
           </span>
       </div>
</script>

Answer 1

请尝试使用以下代码段。请从下拉列表中选择“Chai”和“Chang”选项以检查应用的课程效果。（因为临时我只创建了2个css类）

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-header">
            <input id="products" style="width: 400px;" />
        </div>
        <div id="product-preview" class="demo-section k-header"></div>
    </div>
    <script id="product-template" type="text/x-kendo-template">
    <h4 class="logEntryRow #: ProductName #">ProductName: #: ProductName #</h4>
    </script>
    <script>
        var template = kendo.template($("#product-template").html());

        function preview() {
            var dropdown = $("#products").data("kendoDropDownList");

            var product = dropdown.dataSource.get(dropdown.value());

            var productPreviewHtml = template(product);

            $("#product-preview").html(productPreviewHtml);
        }


        $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/products",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    model: {
                        id: "ProductID"
                    }
                }
            },
            dataBound: preview,
            change: preview
        });
    </script>
    <style>
        .Chai {
            color: red;
        }

        .Chang {
            color: blue;
        }

        .logEntryRow {
            text-decoration: underline;
        }
    </style>
</body>
</html>

如果有任何疑虑，请告诉我。

动态地将类名添加到kendo模板中的div

1 个答案: