danielrapp / fragment.js Goto Github PK

View Code? Open in Web Editor NEW

521.0 25.0 50.0 326 KB

A tiny tool for easily loading html fragments and templates

Home Page: http://danielrapp.github.com/fragment.js/

License: MIT License

JavaScript 100.00%

fragment.js's Introduction

fragment.js

A minimalistic tool for easily loading html fragments

Examples

Example

Fragment.js allows you to load html fragments into any element, by just adding a data-fragment attribute.

<div data-fragment="fragment.html"></div>

Templating example

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>

HTML as JSON

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>

Combining

Of course, combining the two attributes also works.

<div data-fragment="mustache-fragment.html" data-fragment-json="fragment.json"></div>

Media queries

To only load certain fragments dependning on media queries, use the data-fragment-media attribute.

<div data-fragment="fragment.html" data-fragment-media="(max-width: 250px)"></div>

Configuring fragment.js

Overriding

To override the attribute names, just change fragment.html and fragment.json

fragment.html = 'src';
fragment.json = 'json';

<div data-src="mustache-fragment.html" data-json="fragment.json"></div>

JavaScript interface

To manually evaluate an element, or the complete document manually, set the manual toggle to true (before including the script).

fragment = { manual: true };

And the following (after including the script)

fragment.evaluate(element); // evaluate just one element
fragment.evaluate(); // evaluate the whole document

Install

Simply use bower.

bower install fragment.js

Contact

If you have any questions or suggestions that doesn't fit GitHub, send them to @DanielRapp

fragment.js's People

Contributors

Stargazers

Watchers

fragment.js's Issues

Can not working for me !!

It can not load fragment for me!

JSONP support

JSONP support should be added, but I can't think of an elegant API implementation. I originally just wanted to detect if the data-fragment-json url contained callback, but that leaves out APIs, like reddit, that uses jsonp instead.

Adding a whole new attribute just for that feels unnecessary and inelegant.

Simplify loops

At line 46 there's three loops that I'm convinced could be simplified to just one, without compromising code readability. Perhaps a js-based finite state machine is appropriate?

Doesn't work for me, i am using Mustache.js in Chrome browser

i created a simple example using fragment.js and mustache.js. But the line of code
var fragments = document.querySelectorAll('[data-'+fragment.json+']:not([data-'+fragment.html+'])');

doesn't give any fragments.

Testing fragment by {{ name }}

Change the way fragment.manual is evaluated

As at line 3 , a local fragment variable is defined, if you want to make line 139 efficient, you would better use

if (!window.fragment.manual)

instead of

if (!fragment.manual)

or save a local variable of the actual window.fragment in the first place.

Improve exposure

The way we expose the fragment variable at line 1 is not optimal since it requires the user to modify the variable after the script has been loaded. Maybe there's another way?

Load new fragment with ajax

Hi, is it possible to reload a json or html fragment with ajax?
I tried to change the attribute then load the script again but it didn't work. Any suggestion? Anyway I think this is a good function.

Support for nested templates

would be sweet:

layout.html:

<div data-fragment="partial1.html"></div>
<script src="fragment.js"></script>

partial1.html:

<div data-fragment="partial2.html"></div>

partial2.html:

<strong>you made it</strong>

and receive:

<div data-fragment="partial1.html">
  <div data-fragment="partial2.html">
    <strong>you made it</strong>
  </div>
</div>

at the end.

Callback mechanism

a callback mechanism for once a fragment/all fragments are loaded seems necessary, as neither $(document).ready() nor $(element).ready() would work for obvious reasons.

Error fetching package from Bower

Just FYI, I think the package registry in Bower is wrong, you have:

fragment git://github.com:DanielRapp/fragment.js

I registered it again as fragment.js with this URL:

fragment.js git://github.com/DanielRapp/fragment.js.git

Add IE support

Add IE support, by providing wrappers for XMLHttpRequest, Array.prototype.forEach and document.querySelectorAll