Tutorial by Examples

The following example creates a Bootstrap Drop-Down menu, using only Blaze and no JQuery. Document Object Model <nav class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="drop...

A very common task is to create responsive navbars and to create action/footer bars that have different controls based on what page a user is on, or what role a user belongs to. Lets go over how to make these controls. Router Router.configure({ layoutTemplate: 'appLayout', }); Router.route('c...

This follwing is a pure-Blaze approach to toggling UI elements into and outof existence. Think of this as a replacement for modal dialogs. In fact, there are a number of ways to implement modal dialogs using this method (simply add background masks and animations). Document Object Model <templa...

The Database Layer First, we want to set up the Data Distribution Protocol, to make sure that we can persist data to the database, and get it to the client. Three files need to be created... one on the server, one on the client, and one shared between both. // client/subscriptions.js Meteor.subsc...

Alerts and errors are nearly the simplest of all Meteor component patterns. They're so simple, in fact, that they barely register as a pattern in of themselves. Instead of adding FlashAlert modules or patterns, all you really need to do is style a Handlebar template appropriate, add a helper, and wi...

Document Object Model Start by creating your tabs and panes in your Object Model... <template name="samplePage"> <div id="samplePage" class="page"> <ul class="nav nav-tabs"> <li id="firstPanelTab"><a href=&...