jube-fork/Jube.App/wwwroot/kendo/examples/templates/expressions.html

<!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.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.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">
&lt;script id="scriptTemplate" <strong>type="text/x-kendo-template"</strong>&gt;
    Hello, #= firstName # #= lastName #
&lt;/script&gt;

&lt;script&gt;
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    var scriptData = { firstName: "John", lastName: "Doe" };
    $("#script").html(scriptTemplate(scriptData));
&lt;/script&gt;</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: "&lt;strong&gt;lorem ipsum&lt;/strong&gt;" };
$("#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">
&lt;script id="javascriptTemplate" type="text/x-kendo-template"&gt;
    &lt;ul&gt;
    # for (var i = 0; i &lt; data.length; i++) { #
        &lt;li&gt;#= data[i] #&lt;/li&gt;
    # } #
    &lt;ul&gt;
&lt;script&gt;

&lt;script&gt;
    var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    var javascriptData = ["First", "Second", "Third"];
    $("#javascript").html(javascriptTemplate(javascriptData));
&lt;script&gt;</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>