<!doctype html>
<html>
    <head>
        <title>Expressions</title>
        <link href="../../shared/styles/examples.css" rel="stylesheet"/>
        <link href="../../shared/styles/examples-offline.css" rel="stylesheet"/>
        <link href="../../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../../source/styles/kendo.default.css" rel="stylesheet"/>
        <script src="../../../source/js/jquery.min.js"></script>
        <script src="../../../source/js/kendo.core.js"></script>
    </head>
    <body>
        <a href="../index.html">Back</a>
        <div class="description">Expressions</div>
        <div id="example" class="k-content">
            <h3>Basic template</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</h4>
                <pre class="prettyprint">
var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));</pre>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="inline"></div>
            </div>

            <h3>Template as script element</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</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>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="script"></div>
            </div>

            <h3>Encoding HTML</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</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>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="encoding"></div>
            </div>

            <h3>Using JavaScript code inside the template definition</h3>
            <div class="code-sample">
                <h4 class="code-title">Source</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>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">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 scoped>
                #example h3 {
                    clear: both;
                }

                #example .code-sample {
                    width: 70%;
                    float:left;
                    margin-bottom: 20px;
                }

                #example .output {
                    width: 24%;
                    margin-left: 4%;
                    float:left;
                }
            </style>
        </div>
    </body>
</html>
