Question

我使用Meteor 0.8和Blaze，我希望动态地将事件附加到使用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; }}));

希望有人可以帮助找到一种方法在Blaze的Meteor 0.8中做到这一点。

Answer 1

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

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

我也在我的应用程序中使用Bootstrap popovers，据我所知，没有干净的方法将反应内容插入到popover中。但是，您可以通过以下方式进行黑客攻击：

在弹出框的content回调中，使用UI.toHTML呈现模板 - 内容的非反应版本。这是必要的，因为否则弹出窗口的尺寸和位置不会很好。
使用Meteor.defer调用，将弹出窗口内容替换为被动内容，以便在弹出窗口打开时继续更新。

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

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

1 个答案: