Kendo ui 使用总结----Kendo UI 模板

梦里梦外; 2022-05-20 05:30 166阅读 0赞

近来工作用到了一个未接触过的前端框架，在使用中有一些心得体会，记录下来，只是一部分心得，后期再补充。。

### Kendo UI 模板 ###

模板语法 Kendo 模板使用了一种称为“\#”的语法形式，使用这种语法，\#用来表明模板中的某个部分可以使用 JavaScript 数据来替代,这个玩意很有用。  
用三种方式使用 \# 语法：  
1.显示字面量 \#=\#  
2.显示HTML元素 \#：\#  
3.执行任意的Javascript代码 \#if() \{\# …\#\}\#

###### 显示原始数据 `#= #` ######

`var template = kendo.template("<div id='box'>#= firstName #</div>")`  
调用实例

<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>

最终结果：“Todd”。

###### 显示 HTML 数据 `#：#` ######

如果你需要显示经过 HTML 编码过的数据，使用 Kendo UI 模板可以自动处理这些编码过的 HTML 元素，但需要使用不同的语法 \#: …\#,例如：

`var template = kendo.template("<div id='box'>#: firstName #</div>");`  
使用：

<div id="example"></div>
    <script>
     var template = kendo.template("<div id='box'>#: firstName #</div>");
        var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
        var result = template(data); //Pass the data to the compiled template
        $("#example").html(result); //display the resulting encoded HTML Output (<b>Todd</b>)
    </script>

结果：`<b>Todd </b>`

###### 执行JS代码 `# expression` ######

无论是在行内模板中，还是在外部模板中，都可以使用JS变量和表达式。  
示例1

示例2

var template = "#if(foo) {# #= foo # is true #}#";

示例3