1

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

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

<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 执行此操作的方法。

4

1 回答 1

2

Spark 生成的 HTML 可以直接插入 DOM 的原因是因为它具有“地标” ——当 DOM 节点具体化时，可以将注释处理为事件和处理程序。

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

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

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

因为 Bootstrap 使用 jQuery，所以现在你应该可以正确地移除响应式逻辑了。Meteor 的未来版本可能会有更简单的方法来做到这一点。

于 2014-04-19T21:22:20.030 回答