kendo-ui的template使用

一、Render values as HTML (#= #)

<script id="viewTemplate" type="text/x-kendo-template">
    <div class="lb-form-item">
        <label class="lb-form-label">Name:</label>
        <div class="lb-text-word">#=formatStr(name)#</div>
    </div>
</script>

二、Use HTML encoding to display values (#: #)

<script id="viewTemplate" type="text/x-kendo-template">
    <div class="lb-form-item">
        <label class="lb-form-label">Name:</label>
        <div class="lb-text-word">#:name#</div>
    </div>
</script>

三、Execute arbitrary JavaScript code (# if (true) { # ... non-script content here ... # } #)

<script id="viewTemplate" type="text/x-kendo-template">
    <div class="lb-form-item">
        <label class="lb-form-label">Name:</label>
        #if(true){#
        <div class="lb-text-word">#=formatStr(name)#</div>
        #}else{#
        <div class="lb-text-word">#=formatStr(name1)#</div>
        #}#
    </div>
</script>

四、数组循环

<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
    <li>
        id: <span data-bind="text: id"></span>
        name: <span data-bind="text: name"></span>
    </li>
</script>
<script>
var viewModel = kendo.observable({
    products: [
        { id: 1, name: "Coffee" },
        { id: 2, name: "Tea" },
        { id: 3, name: "Juice" }
    ]
});
 
kendo.bind($("ul"), viewModel);
</script>