Meteor make widgets easy on new blaze engine

Making widgets on the new blaze template is really easy!

You just have to create four things:

1 - Your widget's template

For example an image of an album that shows a list of musics when clicked.

<template name="albumPlusInfo">
<img id="infoButton" data-placement="top" data-toggle="popover" data-container="body" data-trigger="click" data-content="
    <table class='table table-hover'>
        <thead>
            <tr>
                <th>Music</th>
                <th>Quality</th>
            </tr>
        </thead>
        <tbody>
            {{#each displayMusics}}
                <tr>
                        <td>{{musicName}}</td>
                    <td>{{musicQuality}}★ ★ ★ </td>
                </tr>
            {{/each}}
        </tbody>
    </table>
    <button class='btn goOrder'>Buy Album Now!</button>
  src="/images/albumAwesome.jpg">
</template>

2 - Helpers for the widget's template

Get the info from the Musics mongo collection

Template.albumPlusInfo.helpers({
   displayMusics: function() {
     return Musics.find();
});

3 - Events for the widget's template

Using iron-router to route to the buy page

Template.albumPlusInfo.events({
   'click .goOrder: function (event, template) {
       Router.go('/app/buyalbum');
  }
});

4 - Call popover function each time widget is rendered

Using boostrap popover

Template.albumPlusInfo.rendered = function () {
 $('#infoButton').popover();
};

Making widgets in the new blaze engine is cool!
Try it out!