如何使用 Blaze 将事件附加到 Meteor 0.8 中生成的模板的 html答案

【问题标题】：how to attach events to generated html of a template in Meteor 0.8 with Blaze如何使用 Blaze 将事件附加到 Meteor 0.8 中生成的模板的 html
【发布时间】：2014-06-03 00:13:48
【问题描述】：

我正在使用带有 Blaze 的 Meteor 0.8，我想将事件动态附加到使用模板的 UI.toHTML 生成的 HTML 内容。我正在寻找的功能是 Blaze 中 Spark.attachEvents 的替代品。

到目前为止，我所做的是创建了以下模板，以便像小部件/组件一样使用。

<template name="postLinks">
    <div id="link-popover-wrapper" >
        <ul class="link-popover">
        {{#each linkOptions}}
            <li><a tabindex="-1" class="link-action" id="link-{{value}}" href="#">{{label}}</a>
            </li>
         {{/each}}
        </ul>
    </div>
</template>

并且该模板用于myPostItem模板的Helper中。

Template.myPostItem.events({

    'click .post-item-link-picker': function (evt, tmpl) {
        var tempData = {linkOptions:[{label:'Favorite', value : 'favorite'}, ...]};

        // Get the HTML content of the template passing data
        var linkContent = UI.toHTML(Template['postLinks'].extend({data: function () { return tempData; }}));

        // Attach events to the linkContent like in Spark
        /*Spark.attachEvents({
              'click link-action': function (e, tmpl) {
                   alert("Component item click");
              }
          }, linkContent);*/

        // Popover the content using Bootstrap popover function
    }
});

所以我的要求是将事件附加到动态生成的 HTML 内容中。在上面代码中提到的以下行之后的 linkContent 中，如 Spark.attachEvents。

var linkContent = UI.toHTML(Template['postLinks'].extend({data: function () { return tempData; }}));

希望有人可以帮助找到在 Meteor 0.8 中使用 Blaze 执行此操作的方法。

【问题讨论】：

标签： meteor meteor-blaze

【解决方案1】：

Spark 生成的 HTML 可以直接插入 DOM 的原因是因为它有 "landmarks" - 可以在实现 DOM 节点时将其处理为事件和处理程序的注释。

Blaze 的工作方式不同 - 它使用 UI.render 函数将 UI 组件直接插入 DOM 并附加事件。如果您使用UI.toHTML，它不能直接将模板事件附加到 DOM，因为 Spark 没有用于执行此操作的任何注释。

我还在我的应用程序中使用 Bootstrap 弹出框，据我所知，没有干净的方法可以将响应式内容插入弹出框。但是，您可以通过以下方式使用 hack 来近似它：

在弹出框的content 回调中，使用UI.toHTML 渲染模板 - 内容的非反应版本。这是必要的，否则弹出框的大小和位置都不会正确。
使用Meteor.defer 调用，将弹出框内容替换为响应式内容，这样它们会在弹出框打开时继续更新。

因为 Bootstrap 使用 jQuery，所以你现在应该可以使用 removing reactive logic properly。 Meteor 的未来版本可能会有更简单的方法来做到这一点。

【讨论】：