Question

“稳定的应用程序开发需要严格的代码组织变成清晰的“块”。“

为此，我使用Mustache将脚本中的数据呈现到我的HTML中。

我将Mustache模板存储在特殊脚本标记中：

<script id="template" type="text/template">
    Mustache template goes here and is invisible
</script>

要在div中渲染模板，我只需调用Mustache渲染函数

var template = $('#template').html();
$('#someDiv').html(Mustache.render(template));

现在想象一下，我想将一个click事件绑定到Mustache模板中的一个元素，或者将我稍后将使用的元素缓存...我显然无法在页面加载时执行此操作，因为模板尚未呈现。< / p>

为了让事件发挥作用，我必须在之后声明一个事件我已经呈现了HTML。要使用元素，我必须在需要时手动选择它，例如$('.foo')代替缓存的this.foo

结果是，现在我有（'click）事件和jQuery选择散布在我的对象中，而不是在bindEvents和cacheDOM函数中。

以下是问题的简化示例：https://jsfiddle.net/6L2ry6hr/

在上面的示例中，它并不坏......但随着我的应用程序变得越来越复杂，它变得有点麻烦。

Answer 1

现在想象一下我想将click事件绑定到Mustache中的元素   模板

我显然无法在页面加载时执行此操作，因为模板尚未呈现。

使用jQuery可以满足要求。 .innerHTML元素的<script>可以通过附加的事件和事件处理程序传递给jQuery()。

jQuery.holdReady(true);
var template = jQuery($("#template").html());
// template.filter("element").on("event", function() {// do stuff})
jQuery("body").append(template);
jQuery.holdReady(false);
jQuery(function() {
  // do stuff
})

在尚未呈现的元素上缓存DOM并绑定点击事件

1 个答案: