html [mobile] [kendo]模板绑定样本

Posted 2021-05-11

<!--

Kendo UI Templates use a simple templating syntax called hash templates. With this syntax, the # (hash) sign 
is used to mark areas in a template that should be replaced by data when the template is executed. 
The # character is also used to signify the beginning and end of custom Javascript code inside the template.

There are three ways to use the hash syntax:
--------------------------------------------
1. Render values as HTML: #= #. RENDERS SPECIAL HTML CHARS (like &#9679;) ALSO
2. Use HTML encoding to display values: #: #.
3. Execute arbitrary Javascript code: # if (true) { # ... non-script content here ... # } #.
   Hash Literals

If your template includes a literal # character, which is not part of a binding expression and is not a script 
code marker, then you must escape that character or it causes a template compilation error. For example, this can 
happen if a # is used inside a hyperlink URL or a CSS color value. Literal # in Javascript strings are escaped 
via \\\\#, while literal # in external HTML script templates are escaped via \\#.

-->

<div id="example"></div>
<script>
    var template = kendo.template("<div id='box'>#= firstName #</div>");
    var data = { firstName: "Todd" }; //A value in JavaScript/JSON
    var result = template(data); /Pass the data to the compiled template
    $("#example").html(result); //display the result
</script>

=======================================================================================================
=======================================================================================================

<div id="listView"></div>
<!-- put contents of this template into JavaScript declared one -->
<script id="scriptTemplate" type="text/x-kendo-template">
    <ul style="color:red;">
    # for (var i = 0; i < data.length; i++) { #
        <li>#= data[i] #</li>
    # } #
    </ul>
</script>
<script>
  $(document).ready(function(){
    var data = ["Able", "Ben", "Conn"]; 
    var jsTemplate = kendo.template("<ul style='color:blue;'> # for (var i = 0; i < data.length; i++) { # <li>#= data[i] #</li> # } # </ul>");
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    function renderScriptTemplate() {
      $("#listView").html(scriptTemplate(data));
    }
    function renderJsTemplate() {
      $("#listView").html(jsTemplate(data));
    }
  });
</script>

=======================================================================================================
=======================================================================================================

<script type="text/x-kendo-template" id="preset-timers-template">
    <label id="preset-${id}">
        ${title}
        <input type="checkbox" onchange="selectPresetTimerOnChange(this, ${id})" />
    </label>
</script>
<script type="text/x-kendo-template" id="custom-timers-template">
    <label id="custom-${id}">
        ${title}
        <input type="checkbox" onchange="selectCustomTimerOnChange(this, ${id})" />
    </label>
</script>
<script type="text/x-kendo-template" id="custom-timers-grid-template">
    <div style="font-size: 0.8em">${date}</div>
    <div>
        ${title}
        <a class="listview-btn" data-role="button" data-icon="compose" onclick="${onClickEvent}"></a>
    </div>
</script>

=======================================================================================================
=======================================================================================================

<div id="example"></div>

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

<script type="text/javascript">
    // use a custom function inside the template. Must be defined in the global JavaScript scope
    function myCustomFunction (str) {
        return str.replace(".", " ");
    }

    //Get the external template definition using a jQuery selector
    var template = kendo.template($("#javascriptTemplate").html());

    //Create some dummy data
    var data = ["Todd.Holland", "Steve.Anglin", "Burke.Ballmer"];

    var result = template(data); //Execute the template
    $("#example").html(result); //Append the result
</script>

=======================================================================================================
=======================================================================================================

<script id="javascriptTemplate" type="text/x-kendo-template">
    # var myCustomVariable = "foo"; #
    <p>
        #= myCustomVariable #
    </p>
</script>

=======================================================================================================
=======================================================================================================

<ul id="users"></ul>

<script type="text/x-kendo-template" id="myTemplate">
    #if(isAdmin){#
        <li>#: name # is Admin</li>
    #}else{#
        <li>#: name # is User</li>
    #}#
</script>

<script type="text/javascript">
    var templateContent = $("#myTemplate").html();
    var template = kendo.template(templateContent);

    //Create some dummy data
    var data = [
        { name: "John", isAdmin: false },
        { name: "Alex", isAdmin: true }
    ];

    var result = kendo.render(template, data); //render the template

    $("#users").html(result); //append the result to the page
</script>

=======================================================================================================
=======================================================================================================

<script id="javascriptTemplate" type="text/x-kendo-template">
    <h4>#= $("\#theSpan").text()  #</h4>
</script>