How to pass functions to capture events in custom component in Meteor with Blaze

Question

I want to know how to bind/set template-passed-parameter-value to click event of an item in the template in Meteor.

I'm using Meteor 0.7.0.1 with Blaze UI package. My main idea is to build a re-usable custom components in Meteor with Blaze template engine. I have the following component which is working fine at the moment but I want this to be more customizable and remove some dependencies. This is my component template named postLinks

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

This postLinks component is used in the myPostItem helper.

Template.myPostItem.events({

    'click .post-item-link-picker': function (evt, tmpl) {
        var tmpPostId = this._id;
        var tempData = {linkOptions:[{label:'Favorite', value : 'favorite'},{label:'Wish list', value : 'wishlist'},{label:'Later', value : 'later'}, {label:"Read", value:"read"}]};

        var linkContent = Template.postLinks(tempData);
        $(".item-link-picker").popover({
            content: linkContent, html: true, placement: 'bottom', trigger: "manual",
            template: "UI_POPOVER_TEMPLATE"});
            $("#item-link-picker-"+tmpPostId).popover('show');
    },

    'click .link-action': function (evt, tmpl) {
        //.... some code here to update link selection in db
    }
});

Above code is working fine and I want to improve it to have following

• Pass item click event externally to be bind to link-action like

After above two changes it will look like :

Template.myPostItem.events({

    'click .post-item-link-picker': function (evt, tmpl) {
        var tmpPostId = this._id;
        var tempData = { itemClick:function(){}, linkOptions:[{label:'Favorite', value : 'favorite'},...]};
        var linkContent = Template.postLinks(tempData);
        $(".item-link-picker").popover({
            content: linkContent, html: true, placement: 'bottom', trigger: "manual",
            template: "UI_POPOVER_TEMPLATE"});
        $("#item-link-picker-"+tmpPostId).popover('show');
    }
});

I lack knowledge how/where to bind that passed event handling function to link-action elements in template or helper. I really appreciate if anybody could help to find a way to do that.

Answer 1

You go the other way around and use jQuery event triggering system, so

Template.myPostItem.events({
  'click .link-action': function (evt, tmpl) {
     $(evn.target).trigger('post-link-action', this /* extra data */);
  },
});

This event can be easily catched in any parent template:

<template name="someOtherTamplate">
  {{> myPostItem}}
</template>


Template.someOtherTemplate.events({
  'post-link-action': function (evt, tmpl, extra) {
     // the user of your component can define their custom behavior here
   },
});

Please note that the event extra parameter will only be supported in the next Meteor release. Currently (0.8.0) it is included in the devel branch.