how to attach events to generated html of a template in Meteor 0.8 with Blaze

Question

I'm using Meteor 0.8 with Blaze and I want to attach events dynamically to HTML contents generated using UI.toHTML of a template. The functionality I am looking for is the alternative to Spark.attachEvents in Blaze.

What I have done so far is that I have created the following template to be used like a widget/component.

<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>

And the template is used in Helper of the myPostItem template.

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
    }
});

So my requirement is to attach events to a dynamically generated HTML contents.in the linkContent like Spark.attachEvents after the following line as mentioned in above code.

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

Hope somebody can help to find a way to do this in Meteor 0.8 with Blaze.

Answer 1

The reason that Spark-generated HTML could be directly inserted into the DOM is because it had "landmarks" - annotations that could be processed into events and handlers when the DOM nodes were materialized.

Blaze works differently - it inserts a UI component into the DOM directly and attaches events, using the UI.render function. It cannot directly attach template events to the DOM if you use UI.toHTML because there are none of the annotations that Spark had for doing this.

I'm also using Bootstrap popovers in my app, and as far as I know there's no clean way to insert reactive content into a popover. However, you can approximate it with a hack in the following way:

• In the content callback of the popover, render the template with UI.toHTML - a nonreactive version of the content. This is necessary because otherwise the popover won't be sized and positioned properly.
• Using a Meteor.defer call, replace the popover contents with reactive content, so they'll continue updating while the popover is open.

Because Bootstrap uses jQuery, you should be fine with removing reactive logic properly, for now. Future versions of Meteor will probably have easier ways to do this.