Question

我可以执行jQuery脚本语法，如

$('some-selector').val(${data});

在我的jQuery模板中？

如何在jQuery模板中连接事件处理程序，事件处理程序在模板中，而不在模板外编写脚本？

所以，我知道这不起作用：

<script id="modal-edit-mail" type="text/x-jquery-tmpl">
<button id="killswitch">Stop Now</button>
$('#killswitch').click(function(){some function});
</script>

Answer 1

关于您的第一个问题：

是的，您可以使用${expr}或{{= expr}}语法在模板中放置Javascript表达式（包括函数调用）。这些示例都适用于我使用Chrome：

${myTemplateVariable}
${Math.max(Math.min(1, myTemplateVariable), 4)}
${$("#test").html()}
{{= String({"foo": "bla"})}}

但是有一些问题：

大括号通常是jQuery的问题。这就是为什么在上一个例子中我必须使用替代{{= }}语法。
出于安全考虑，不允许使用某些JavaScript表达式，例如： Google Chrome不允许您在模板中使用 eval 。

此外，如果要包含在模板中的代码相当复杂，最好在特殊的$ item模板变量上定义一个函数。 E.g。

$("#myTemplate").tmpl(myData, {"myComplexFunction": function () {
    // doing complex stuff here
    (...)
    return someBadAssValue;
}}).appendTo("#myTargetElement");

然后您可以编写以下模板代码：

${$item.myComplexFunction()}

请参阅tmpl函数的第二个参数的文档：http://api.jquery.com/tmpl/

关于第二个问题（如何连接事件处理程序）：

当我使用jQuery时，我编写了单独的函数来使用当前数据更新页面的每个部分。为此，函数将清空（）页面中的某些div并使用适当的jQuery模板呈现新内容。在完全相同的函数中，我重新配置了所有事件处理程序，即在将新HTML插入页面之后。

我知道有一些（严重/未记录的）update（）方法可以更直接地更新jQuery模板，但我认为仍然需要您重新配置事件处理程序（如果新的交互元素已经由更新添加）。

编辑：为了知道哪个元素触发了某个事件，我使用了包含数据元素ID的HTML-ID，例如

<a href="javascript:void" id="remove_person_5">Remove</a>

这个用于设置事件处理程序的JS代码：

$("[id^='remove_person_']").click(handle_remove_person);

Answer 2

不 - 这是一个模板。模板旨在分离演示和功能。

Answer 3

您可以添加一个单独的JS脚本来添加所需的功能。在您网页的<head>部分，只需添加一个链接即可：

<script type="text/javascript" src="killswitch.js"></script>

然后，在killswitch.js中，在ready函数中添加选择器并单击函数，如上所述，以便在整个页面加载完成时触发：

$(document).ready(function() { 
    $('#killswitch').click(function(){some function});
});

将脚本添加到Jquery模板

3 个答案: