comment 0

Html Templates in MeteorJS

While everything seems to be as I expected, I stucked at design. Well I had no time to write my own CSS codes, since I haven’t written a full CSS file for any of my projects, I wasnt fast enough to do so. Of course I know a lot about CSS, in other words I know a lot just to edit an existing CSS file. Also main aim in this project isn’t handling design and wasting a lot time on it. Considering all of these, I admit I cheated and bought a great template to use. I want to tell you about how to use html templates in your meteorJS projects as I did.

Preparing Structure

At the first glance, meteorJS presents a great feature for loading client-side codes including CSS, LESS, CoffeeScript, Javascript etc. Because of this feature, you don’t need to handle tens of include codes in your htmls. Also meteorJS’s template structure leads us to simplify our html codes:

The main difference with the common html structures in here as you can see is template tag. These tags can be placed in normal html files and also keeps html itself. We can add meteor specific logic in these templates. What we’ll do in here is putting our client-side codes in client folder as suggested.

I took a screenshot to show you how my structure is : (also you can browse here)



plugins folder keeps my whole external client-side frameworks. stylesheets keeps CSS as you can guess. And the views folder keeps main and placeholder templates.

The main point in here is whole structure is up to you, except the main folders such as client-server-lib-public folders. But I highly recommend you to split whole structure to not confuse while looking the project afterwards. As project grows day by day, you’ll realize how hard to remember where you’ve put what.

Layout Templates

As a consequence of head-body-footer trio, and as placed in almost every project we need a layout to use over and over again, what I mean is a constant header and footer, and a changable body. This is pretty simple with meteorJS’s template structure and iron router. By default meteorJS was providing yield feature with an another name but now as far as I know it’s deprecated, but iron router presents a great capability to handle changable bodies with yield template. Yield is a widely used keyword to keep changable template structure for every route, most of us may have heard it from PHP frameworks.

Luckily meteor reads all files in your project and loads all of them with it’s own algorithm. So you can simply create a head html which includes your title, metatags etc. This file shouldn’t include script tags, since meteor handle it already. Following is how my layout structure seems so:



And this is how I configure iron router:

Pretty simple, isnt it ? A last thing, you can simply use following anchors to load your yields

Breadcrumbs and Active Classes

The most tricky part is handling breadcrumbs and active classes for list elements. And again, luckily someone already thought these and created isActiveRoute. My navigation seems like:

As you can see, it even allows you to use | operator for or. According to the isActiveRoute’s documentation:

Thus active classes were handled without spending much time, but breadcrumbs. The easiest thing to use is meteorJS’s templates again.

When using this template simply you can provide categories, sub-categories and title as how you want it to be.

Pages and Dynamic Template

The easiest part was creating the pages. But I want to tell you about dynamic templates. Meteor presents a great feature to fetch template names from a javascript function.

When you write above code, you MUST define a meteor helper with name getQueryTemplate which returns the name of template that you want to use as a string. For this purpose I used a session variable which has been set by a combobox change event and simply returned this session value.


The issues which you can encounter during building a layout structure for a meteorJS project is more or less like this. To prevent unexpected situations I highly recommend you to split your templates into small files. So using onRendered, handling other events and so on will be much easier. And simply keep in mind, you can find everything that you are looking for, if you search enough.

Thanks !

Leave a Reply

Your email address will not be published. Required fields are marked *