Conventions

Modules

<div class="mod mod-news">
    <!-- your module content goes here -->
</div>

Looks pretty straight, isn't it? Your TerrificJS modules simply needs the .mod class – to identify them as modules – and the specific module class – ie. .mod-news.
These minimal conventions are enough for TerrificJS to instantiate the appropriate module – Tc.Module.News – automatically. To avoid JavaScript errors, TerrificJS checks prior to instantiation whether the specific Module exists or not.

In some cases you do not want to instantiate a module during the bootstrap. Instead you want to reduce the initial workload and lazy init the modules on demand (eg. after scrolling beyond the fold, on click for rarely used functionality etc.). This can be achieved by simply setting the data-ignore flag.

<div class="mod mod-news" data-ignore="true">
    <!-- your module content goes here -->
</div>

Skins

What the hell is a TerrificJS Skin? TerrificJS skins are essentially nothing more than a JavaScript Decorator.

<div class="mod mod-news skin-news-highlighted">
    <!-- your module content goes here -->
</div>

To apply a TerrificJS Skin to your module you simply have to add an additional skin class to your markup – ie. skin-news-highlighted. This will decorate your Tc.Module.News instance with the appropriate Tc.Module.News.Highlighted skin.

In some very rare cases you eventually need your module to be decorated more than once. Nothing easier than that!

<div class='mod mod-news skin-news-highlighted skin-news-promo'>
    <!-- your module content goes here -->
</div>

Simply add a second skin class to your markup – ie. skin-news-promo. TerrificJS will decorate your module with the Tc.Module.News.Highlighted skin first and then wrap it again with Tc.Module.News.Promo skin. So TerrificJS will decorate your module twice by retaining the order in your markup.

Connectors

Connectors provides you the possibility to let your modules talk with each other over configurable communication channels. Whilst the preceding components – modules and skins – both have their CSS and therefore visual counterpart, connectors are purely abstract. So connectors do not need an additional class on your TerrificJS module. Instead the naming convention for connectors are based on the HTML5 data attribute

<div class="mod mo-news skin-news-highlighted" data-connectors="status,filtering,special-filtering">
    <!-- your news module content goes here -->
</div>
<div class="mod mod-tracking" data-connectors="1">
    <!-- your tracking module content goes here -->
</div>

The data-connectors attribute takes a comma separated list of connector ids. Each of them refers to a separate communication channel. As you may have noticed in the snippet above, connector ids could contain 2 - separated by a dash – parts:

  • connectorName – identifies the Connector class, ie. special refers to the Tc.Connector.Special class (optional)
  • connectorId – the communication channel id, eg. 1, filtering, status (required)

If only the connectorId is provided, TerrificJS will wire up the associated Modules with the default connector. The default connector is the only bundled TerrificJS connector and treats all associated modules equally – which means that every module can fire and retrieve events.

If you need an additional, more advanced connector — ie. the Special connector – you will have to write it on your own.

Please refer to the connector documentation for further information.

Conclusion

As long as your markup uses the above naming conventions you do not have to worry about registering your TerrificJS components manually. This is all done for you automatically.

However there may be some cases where you are not able to apply these conventions to your project or to a specific part of your markup. In this case registerModule provides you the abilility to register your modules by hand.

Close