No Description

Herbert Vojčík c16cebae95 Merge pull request #1 from gitter-badger/gitter-badge 4 years ago
.gitignore 0d803775eb Added bower manifest 4 years ago
LICENSE dbb6b24742 Added manifest, link to original code in LICENSE 4 years ago ec94c412af Added Gitter badge 4 years ago
bower.json 25dda7bac4 version field not needed in git repos' bower,json 4 years ago
jquery.xontent.js 5875041940 AMD support 4 years ago
xontent.jquery.json 16df01cd41 Release version 0.1.2 4 years ago
xontent.png f26a9f2eec xontent logo 4 years ago



HTML templates - capture children or siblings into a document fragment and get it back later.

Quick use

Suppose you have this HTML:

<div id="foo">

When you call $('#foo').xontent() first time, the contents of the div is removed, inserted into DocumentFragment and this DocumentFragment is return wrapped in jQuery object.

All subsequent calls to $('#foo').xontent() will return that same DocumentFragment inside a jQuery object.

<template> tag

This look like HTML5 template tag - it was in fact started from Brain Blakely's polyfill of <template> tag. Xontent adopts content property of working template tag; so you can use $('#mytemplate').xontent() as the polyfill - in case of <template> not yet working in your browser, it will just grab its contents and puts it into a DocumentFragment just as for any other element.

Advanced use

Beyond polyfilling template tag (and allowing its functionality to any tag), Xontent allows specifying what content should $el.xontent() grab and remember and subsequenty, return. By default, it is the contents / .content, but you can use data-xontent attribute to specify a few more options:

  • data-xontent="see selector" When you use this form, $(selector).xontent() is adopted and returned by subsequent calls;
  • data-xontent="until selector" When you use this form, all following siblings of an element until hitting selector are removed and inserted into a DocumentFragment. This is much like the jQuery nextUntil call, but it misses text nodes, while Xontent includes every single sibling. If selector is not present among the following siblings, all siblings until the end of parent element are grabbed;
  • Any other form of data-xontent uses the default (take the contents or .content in case of <template>).

Setting xontent (new in 0.1.0)

You can call $('#foo').xontent('set', payload) to set the payload which $('#foo').xontent() will return. The payload may be a DocumentFragment itself, or a jQuery object that encapsulates it.

AMD (new in 0.1.2)

You can load xontent with AMD loader such as requirejs. If loaded via AMD, xontent installs itself to AMD-loaded jQuery.