This package implements a simple namespacing pattern which you can use to keep your global helpers organized and easily accessible.
Start by adding the package to your meteor project
meteor add anti:helpers
Then, create a global namespace object which we are going to use to define our helpers:
MyHelpers = new AntiHelpers();
The code should probably go to your lib
directory, to make sure it loads before
the other js
files and the MyHelpers
object is easily accessible everywhere.
Now, you add new helpers by calling define
method of MyHelpers
object
MyHelpers.define('capitalize', function (value) {
return value.toString().toUpperCase();
});
MyHelpers.define('createdAt', function () {
return moment(this.createdAt).format('YYYY/MM/DD');
});
To make the helpers available from your templates code, you need to register them
MyHelpers.registerAs('$');
You can do that at anytime, so there's no need to wait until you're done with defining your helpers.
Now, both capitalize
and createdAt
can be used like this
<template name="post">
{{#with post}}
<h1>{{$.capitalize ./title}}</h1>
<h2>{{$.createdAt}}</h2>
<p>{{./content}}</p>
{{/with}}
</template>
You can also access your helper from your javascript code like this
MyHelpers.capitalize('text');
They're not properties of the MyHelpers
object, instead they belong
to it's prototype. This implies that define
and registerAs
are reserved
words.
You may want to use this pattern when your application grows large and it slowly
becomes hard to maintain all the global helpers you've implemented over time.
There are several benefits of using anit:helpers
to manage them:
- You can naturally split your global helpers into several groups, each using their own namespace.
- Writing
{{$.createdAt}}
is more expressive than{{createdAt}}
. If we use the former, it's evident that we are dealing with a global helper, while in the latter case it's not even clear if this is a helper or data context property. - The helpers are easily accessible from both javascript code and within you templates.
You can also use AntiHelpers
in reactive mode:
MyHelpers = new AntiHelpers({ reactive: true });
When reactive
flag is used, the helpers can re-render themselves when you
change their implementation. This provides a useful abstraction layer, when
you want to have a group of helpers that change their behavior based on application,
but you don't really want to embed that login into your UI implementation.