Question

我遇到了一个函数，如下所示：

<script id="tmpl-grid-action" type="text/x-kendo-template">
    <button type='button' class='btn btn-success btn-xs' onclick='editForm("#=Id#")'><s:message code='global.btn.edit' /></button>
    <button type='button' class='btn btn-warning btn-xs' onclick='delConfirm("#=Id#")'><s:message code='global.btn.delete' /></button>
</script>

而且我不确定如何 - ＆gt; delConfirm（＃= Id＃）有效。

当我点击此按钮时，如果点击此按钮，该按钮将触发该功能，并且该功能的参数将自动从相关字段中获取ID，我不知道它从哪里抓取，以及它是如何工作的？

我正在使用Kendo UI Grid。

提前致谢〜

Answer 1

它是template。来自文档：

Kendo UI模板使用一种名为hash的简单模板语法   模板。使用此语法，＃（哈希）符号用于标记区域   在模板中，模板应该由数据替换   执行。＃字符也用于表示开头和   模板中自定义JavaScript代码的结尾。

使用哈希语法有三种方法：


将值渲染为HTML：＃=＃。

使用HTML编码显示值：＃：＃。

执行任意JavaScript代码： #if（true）{＃...此处为非脚本内容...＃}＃。

还可以使用external template：

模板通常包含表达式。一些模板框架发明了自己重新实现的JavaScript提供表达糖以性能为代价，但Kendo UI模板选择允许在模板内执行普通的JavaScript，再次支持性能而不是昂贵的语法糖。

文档示例：

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

所以对于你的例子，你应该有一些东西：

<div id="div-where-you-want-to-insert"></div>

<script id="tmpl-grid-action" type="text/x-kendo-template">
    <button type='button' class='btn btn-success btn-xs' onclick='editForm("#=Id#")'><s:message code='global.btn.edit' /></button>
    <button type='button' class='btn btn-warning btn-xs' onclick='delConfirm("#=Id#")'><s:message code='global.btn.delete' /></button>
</script>

<script type="text/javascript">
    var template = kendo.template($("#tmpl-grid-action").html());

    var data = {Id: "XXX"};

    var result = template(data);

    $("#div-where-you-want-to-insert").html(result);
</script>

关注JSP中的function（）

1 个答案: