从 jQuery 模板发出 Javascript答案

【问题标题】：Emitting Javascript from jQuery templates从 jQuery 模板发出 Javascript
【发布时间】：2011-06-13 18:56:23
【问题描述】：

我想从 jQuery 模板中发出一些 js，例如我有类似的模板

<script id="tmplID" type="text/x-jQuery-tmpl">
<input id="static.${val}" type="text"/>
<input id = "static2.${val}" type="text"/>
<script type="text/javascript">
$('#static.'+${val}).change(function(){
  alert('some value');
});
</script>
</script>

当我这样称呼这个模板时：

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

它将 JavaScript 更改函数呈现为页面上的字符串，而我希望将其附加为可执行的 JavaScript。

【问题讨论】：

标签： jquery jquery-templates client-templates

【解决方案1】：

您的代码存在多个问题。

首先，您应该从不使用嵌套的<script> 标签。即使关闭 </script> 标记位于 javascript 块中的字符串内，您仍应将其拆分，使其不会按原样显示，因为即使是最符合标准的浏览器也可能会跳闸。更别提那些年长的了……

同样，您应该避免在 ID 中使用点，因为在编写 jQuery 选择器时很容易被忽略。 #id.something 表示 “选择 ID 为 id 的元素，该元素也应用了 something 类”。如果你不能没有它，你可以在编写像#id\\.something这样的选择器时将其转义，这将“选择id为id.something的元素”。

将 javascript 放在模板中也是一个坏主意，您应该重新考虑要实现的目标。几乎总有办法解决它：

您可以使用.delegate() 或.live() 将您的事件绑定到您将来只会创建的元素。
您可以使用不同的选择器，而不是在脚本中硬编码 ID，例如您可以应用一个独特的类来与上述绑定一起使用，这样它就不会干扰现有的标记。如果您需要事件处理程序中的 ID，您可以使用 this.id 或 $(this).attr('id') 轻松提取它。
如果你想在你的脚本中自定义'some value'，你可以为你的元素添加自定义属性，例如<input id="static_something" data-custom="some value" /> 并使用 $(this).data('custom') 将其提取到您的函数中。

考虑到以上所有因素，我会将您的代码重写为类似于以下内容：

<script id="tmplID" type="text/x-jquery-tmpl">
<input id="static_${val}" class="templateinput" type="text" data-custom="value1" />
<input id="static2_${val}" class="templateinput" type="text" data-custom="value2" />
</script>

<script type="text/javascript">
// jQuery ready function
$(function(){
    $('.templateinput').live('change', function(){
        var element_id = this.id;
        var element_data = $(this).data('custom');

        alert('The value of input #' + element_id + ' is: ' + element_data);
    });
});
</script>

如果您有一个包含所有模板项的已知容器，请改用.delegate() 来避免全局绑定。

【讨论】：

【解决方案2】：

你不能在渲染模板后设置事件吗？

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

$('#static.'+obj.val).change(function() {
    ...
});

【讨论】：