thymus.js

Features

Automatic or deferred fragment inclusion or replacement while a page loads
Automatic fragment resolution for relative paths within URI related attributes (configurable)
Load fragments via script using JQuery selectors
Multiple fragment definitions at the same fragment path siphon
Prevents repetitive calls to the same path siphon within a single fragment load action (typical case when multiple fragments reside at the same path siphon)
Self-Referencing templates (processing of fragments that reside in the base page)
Relatively infinite nesting of fragments (fragments within fragments)
head tag fragments
Ability to override the processing of fargment results via result siphon handler
Maintains vertical scrolling positions associated with named anchors that point to a location within a fragment (e.g. example.com/path#someNamedAnchorInAFrag)
DOM/JQuery compliant fragment events dispatched for each resource has been loaded or failed to load (including scripts and nested fragments)
Navigation/Transition Control
Model-To-View Transition Control
Complete JQuery plug-in extensibility

Getting Started

To use thymus.js it obviously needs to be included in the page. Here is the minimal setup:

<head>
<meta charset="utf-8" />
<!-- Thymus script -->
<script src="js/thymus.js" id="thymus" data-thx-base-path="."></script>
</head>

There are two required thymus.js attributes. The thymus id/namespace is used to identify the thymus.js script in order to capture various attribute options on the script tag while the data-thx-base-path is used for fragment path resolution and attribute path resolution. It should point to the root context of the application relative to the page in which thymus.js is loaded.

Internally, when thymus.js loads, it checks for the presence of the JQuery API. If it's not found it will automatically load the most current version found at http://code.jquery.com/jquery.min.js. To provide your own version, simply add the JQuery script tag prior to the thymus.js one or provide a data-thx-jquery-url attribute on the thymus.js script tag that points to the JQuery API of choice.

Fragments

Fragments are at the core of thymus.js and are used to populate full or partial updates to the browser UI. thymus.js assumes that fragmented portions of the UI are fragile and exceedingly dynamic in nature and therefore does not try to bind data that may reside in various sections of the UI. Doing so is prone to memory leaks- especially when a fragment contains child/nested fragments. Instead, thymus.js utilizes the power of JQuery selectors to define routes for fragmented content. Not only does this provide a friendly and familiar interface, but it also eliminates the need to require model observability/binding extensions via JavaScript. This approach lends itself to stateless/RESTful server APIs.

Once JQuery has successfully loaded thymus.js will attempt to load any fragments by looking for DOM elements that have a siphon attribute or a short-hand version of a siphon attribute assigned to it (see the deferment section to prevent fragments from loading automatically). thymus.js loads fragments using JQuery $.ajax(...) calls to retrieve and insert fragments into the DOM. The process is similar to how JQuery $.load(...) works with page fragments, but also automates and adds DOM event interaction to the process.

thymus.js recognizes two types of fragments. The first being view fragments. Any fragments retrieved that have a content-type of text/html will be interpreted as a view content. Similarly, fragments with raw content-type identifiers will also be interpreted as view content, but will have limited model interaction capabilities. Any of the model content-type identifiers and are interpreted as model content and updated in corresponding views via model routing techniques.

This site actually uses 0 thymus.js fragment views to initialize this page. So, feel free to explore and check out your browsers console :)