🥇 O Meteor torna os widgets fáceis no novo motor blaze

Criar widgets no novo modelo blaze é muito fácil!

Você só precisa criar quatro coisas:

1 – O template do seu widget

Por exemplo, uma imagem de um álbum que mostra uma lista de músicas quando clicado.

<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 – Assistentes para o template do widget

Obtenha as informações da coleção Musics mongo

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

3 – Eventos para o template do widget

Usando o roteador de ferro para direcionar para a página de compra

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

4 – Chame a função popover cada vez que o widget for renderizado

Usando boostrap popover

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

Criar widgets no novo motor blaze é legal!
Experimente!

Related Posts