A tiny (625 bytes gzipped) tool for easily loading html fragments and templates.
Fragment.js allows you to load html fragments into any element, by
just adding a data-fragment attribute.
<div data-fragment="fragment.html"></div>
You can also use it for loading templates
with the data-fragment-json attribute.
Mustache,
Handlebars and
Underscore are supported by default
and will automatically be used if they're available in the global scope.
But you can just override the window.fragment.render function
if you want to use something else.
<div data-fragment-json="fragment.json">This is {{adjective}}!</div>
This is {{adjective}}!
If the element already has an innerHTML, you only use the data-fragment attribute,
and don't provide a custom renderer; fragment.js will attempt to render Mustache, Handlebars then Underscore
with the innerHTML as input.
<div data-fragment="mustache-fragment.html">{"adjective":"fantastic"}</div>
{"adjective":"fantastic"}
Of course, combining the two attributes also works.
<div data-fragment="mustache-fragment.html" data-fragment-json="fragment.json"></div>