Director.js: Dynamic Template Decorating From Declarative Attributes
Lately I’ve been doing lots of liberal caching in Rails with
cache_digests for the super fast rendering it grants you. The more logic-less the templates are, the faster they render initially and the harder and more globally they can be cached.
For example, if there are no conditional checks involving
current_user in a template, it can be cached to an entire account or site-wide rather than on a per user basis.
1 2 3 4 5 6 7 8 9
$(document).ready or on the
1 2 3 4 5 6 7 8 9 10 11 12 13
What is going on here? Firstly, it assumes you are using jQuery (or Zepto with the data module) bound to
$ and Underscore or Lo-Dash bound to
_. Why re-invent the wheel, right?
If you call
director.direct() without a variable, it will start at the top of the DOM but you can also call
director.direct('#foo') to scope it to an element with the ID of ‘foo’. Director will then look within the scope for instances of
data-direct and employ the handy ability of jQuery’s
.data() method to turn an attribute value from JSON into an object.
_.reduce iterates through the pairs of the attribute-turned-object and calls they key as a function on
$(@), passing in the value as the parameter. The key could then be any jQuery function. The memoized result is returned to the next key/pair so you can chain the statement together.
Given the original example above, you can then add something like this higher up the DOM:
I also created an empty plain object of
director.directives for adding any special functionality that simple jQuery commands can’t provide. Just make sure to return
this so you can chain your statements together.
For more examples and further development, star director on Github.