fragment.js

A tiny (625 bytes gzipped) tool for easily loading html fragments and templates.

---

Example

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

 data-fragment="fragment.html">

      

This was loaded with fragment.js

---

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.

 data-fragment-json="fragment.json">This is {{adjective}}!

      

This is awesome!

---

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.

 data-fragment="mustache-fragment.html">{"adjective":"fantastic"}

      

fragment.js is really fantastic!

---

Combining

Of course, combining the two attributes also works.

 data-fragment="mustache-fragment.html" data-fragment-json="fragment.json">

      

fragment.js is really awesome!

---

JSONP example

If the window hostname isn't the same as the json url hostname, it'll try to use jsonp. By default it uses callback as the callback parameter, but you can change it by changing fragment.jsonp

 data-fragment-json="http://search.twitter.com/search.json?q=javascript&rpp=2">
{{#results}}

  {{from_user}} said:
  {{text}}

{{/results}}

CheckNAU said:
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix | コリス http://t.co/leWQiGSHoU




NooKo3_News said:
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix | コリス（はてぶ - IT）http://t.co/9Mz7eyAZhN

---

Download