Skip to content
Lightweight JavaScript library to be used for pulling external templates & other content asynchronously/synchronously.
JavaScript
Latest commit 21be035 Mar 20, 2012 @ifandelse Fixed a typo
Failed to load latest commit information.
examples Updated build process to create combined output, and consolidated amd… Mar 11, 2012
ext Updated build process to create combined output, and consolidated amd… Mar 12, 2012
lib Updated build process to create combined output, and consolidated amd… Mar 12, 2012
node_modules Renamed renderInstruction to bindingInstruction, updated examples and… Nov 28, 2011
spec Commented out mockjax for the moment, since it won't allow synchronou… Feb 4, 2012
src-all-build Updated build process to create combined output, and consolidated amd… Mar 12, 2012
src Updated build process to create combined output, and consolidated amd… Mar 12, 2012
.gitignore Initial Add Oct 19, 2011
README.md Fixed a typo Mar 20, 2012
build-all.sh Updated build process to create combined output, and consolidated amd… Mar 12, 2012
build.json Updated build process to create combined output, and consolidated amd… Mar 12, 2012
build_combined.json Updated build process to create combined output, and consolidated amd… Mar 12, 2012
index.html Initial Add Oct 19, 2011
nodetesthost.js Updated build process to create combined output, and consolidated amd… Mar 12, 2012
pavlov

README.md

Infuser

What is it?

Infuser is a JavaScript library you can use to retrieve templates (or other files) asynchronously (or synchronously, if you must).

Why would I use it?

  • It provides a consistent way to access external view data from the client.
  • Choose your own local caching mechanism:
    • Store your templates locally in an in-memory cache
    • Store your templates (if your templating framework requires it) in Script elements in the DOM
    • Or - write your own storage provider
  • Keep your templates tidy - If you're using a templating framework like jquery-tmpl or underscore templates, you don't have to keep all of your template/partial content in the same file. Separate your concerns, and simply pull them on an as-needed basis.
  • Have static content you want to request as partials? Just like templates, just pull them as-needed and attach to the element of your choice.

How do I use it?

Check out the examples folder in this repository for more details.

JavaScript:

// Pulling static content
// When the DOM is ready...
$(function(){
    infuser.defaults.templateUrl= "./templates",// look for templates in a "templates" directory (relative to this page)
    infuser.defaults.templateSuffix= ".html"    // look for templates with an ".html" suffix (this is a default value, just showing as an example)
    infuser.defaults.templatePrefix = "tmpl_";  // look for templates with a "tmpl_" prefix
    // Now - wire up a click event handler that asynchronously fetches a static html file and appends it to an element
    $('#btnTemplate').click(function(){
        infuser.get("HelloWorld", function(template){
            var tgt = $("#target");
            target.hide().children().remove();
            tgt.append($(template)).fadeIn();
        })
    });
});

// Pulling a jquery-tmpl
var model = { names: ["Ronald", "George", "William", "Richard"] };
$(function(){
    $('#btnTemplate').click(function(){
        infuser.defaults.templateUrl= "./templates",
        infuser.get("Example", function(template){
            var tgt = $("#target");
            target.hide().children().remove();
            var div = $("<div />");
            $.tmpl(template, model).appendTo(div);
            tgt.append(div).fadeIn();
        })
    });
});

// Tell infuser how to produce a rendered template with the template engine of your choice
infuser.defaults.bindingInstruction = function(template, model) {
    return $.tmpl(template, model); //jquery-tmpl
};

// The 'infuse' method lets you retrieve, render and attach to the DOM in one call
// It takes a template name and an options object which can contain:
// preRender          - called before the template is 'rendered/attached' to the DOM
// render             - can be used to override the default rendering behavior for infuser
// postRender         - called after the template is rendered/attached to the DOM
// model              - option javascript object to be used to bind to a data-driven template
// useLoadingTemplate - true/false option to display a loading template (defined below)
// loadingTemplate    - object defining a template that can be displayed while the requested template is retrieved
//                      "loadingTemplate.content" - html content of the loading template
//                      "loadingTemplate.transitionIn(target)"  - enables hooks into rendering the loading template
//                      "loadingTemplate.transitionOut(target)" - enables hooks into how to remove loading template
// targetSelector     - CSS selector which resolves the target element to be used when rendering the template
//                      If you don't provide a targetSelector, infuser will try to find a target using the behavior
//                      defined in infuser.defaults.domTargetResolver (default behavior is finding a DOM element
//                      with an id matching template name)
// you can also just pass in the options object and include "templateId" as one of the members
$('#btnPlain').click(function(){
    infuser.infuse("HelloWorld", { postRender: togglePlain, targetSelector: "#targetPlain" });
});

$('#btnFancy').click(function(){
    infuser
        .infuse(
            "Example",
            {
                targetSelector: "#targetFancy",
                model: model,
                preRender: function(target, template) { $(target).children().remove().end().fadeOut().hide(); },
                render:    function(target, template) { $(target).append(template).slideDown('slow'); },
                postRender: toggleFancy
            }
    );
});

What about dependencies?

Infuser takes a dependency on jQuery (1.5.2 or greater) and Traffic Cop (see https://github.com/ifandelse/trafficcop).

In order to run the samples under the example folder, you need to:

  • Install Node.js, and then "npm install express". Then browse to http://localhost:1581
  • If you're on windows, you could set up a virtual directory under IIS at the top level of this repository (top level, or the script refs will break!)

Test dependencies (pick one & then browse to the spec/integration/runner.html or spec/unit/runner.html):

  • Node.js - run the nodetesthost.js file at root of repository
  • IIS (set up virtual directory at root of repository)
  • Other web server (just be sure and configure the hosting from the root of repo)
Something went wrong with that request. Please try again.