All Components

Templates / Expressions

Basic template

var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));

Output:

Template as script element

<script id="scriptTemplate" type="text/x-kendo-template">
    Hello, #= firstName # #= lastName #
</script>

<script>
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    var scriptData = { firstName: "John", lastName: "Doe" };
    $("#script").html(scriptTemplate(scriptData));
</script>

Output:

Encoding HTML

var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));

Output:

Using JavaScript code inside the template definition

<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= data[i] #</li>
    # } #
    <ul>
<script>

<script>
    var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    var javascriptData = ["First", "Second", "Third"];
    $("#javascript").html(javascriptTemplate(javascriptData));
<script>

Output:

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Expressions</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content wide"> 
    <h4>Basic template</h4> 
    <pre class="prettyprint">
var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));</pre> 
    <h4 style="padding-top: 2em;">Output:</h4> 
    <div class="prettyprint" id="inline"></div> 
   </div> 
   <div class="demo-section k-content wide"> 
    <h4>Template as script element</h4> 
    <pre class="prettyprint">
<script id="scriptTemplate" <strong>type="text/x-kendo-template"</strong>>
    Hello, #= firstName # #= lastName #
</script>

<script>
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    var scriptData = { firstName: "John", lastName: "Doe" };
    $("#script").html(scriptTemplate(scriptData));
</script></pre> 
    <h4 style="padding-top: 2em;">Output:</h4> 
    <div class="prettyprint" id="script"></div> 
   </div> 
   <div class="demo-section k-content wide"> 
    <h4>Encoding HTML</h4> 
    <pre class="prettyprint">
var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "<strong>lorem ipsum</strong>" };
$("#encoding").html(encodingTemplate(encodingData));</pre> 
    <h4 style="padding-top: 2em;">Output:</h4> 
    <div class="prettyprint" id="encoding"></div> 
   </div> 
   <div class="demo-section k-content wide"> 
    <h4>Using JavaScript code inside the template definition</h4> 
    <pre class="prettyprint lang-html">
<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= data[i] #</li>
    # } #
    <ul>
<script>

<script>
    var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    var javascriptData = ["First", "Second", "Third"];
    $("#javascript").html(javascriptTemplate(javascriptData));
<script></pre> 
    <h4 style="padding-top: 2em;">Output:</h4> 
    <div class="prettyprint" id="javascript"></div> 
   </div> 
   <script id="scriptTemplate" type="text/x-kendo-template">
                Hello, #= firstName # #= lastName #!
            </script> 
   <script id="javascriptTemplate" type="text/x-kendo-template">
                <ul>
                    # for (var i = 0; i < data.length; i++) { #
                        <li>#= data[i] #</li>
                    # } #
                </ul>
            </script> 
   <script>
                var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #!");
                var inlineData = { firstName: "John", lastName: "Doe" };
                $("#inline").html(inlineTemplate(inlineData));

                var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
                var encodingData = { html: "<strong>lorem ipsum</strong>" };
                $("#encoding").html(encodingTemplate(encodingData));

                var scriptTemplate = kendo.template($("#scriptTemplate").html());
                var scriptData = { firstName: "John", lastName: "Doe" };
                $("#script").html(scriptTemplate(scriptData));

                var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
                var javascriptData = ["First", "Second", "Third"];
                $("#javascript").html(javascriptTemplate(javascriptData));
            </script> 
   <style>
                #example pre.prettyprint {
                        height: auto;
                        min-height: 120px;
                        overflow: auto;
                        background-color: #fff;
                        border: 1px solid #ccc;
                        padding: 5px;
                }
            </style> 
  </div>   
 </body>
</html>