The new jQuery template plug-in is awesome. That being said, the double-curly brace template-tags are not exactly my cup of tea. In a more complex template the tags obscure the markup contained in the template, and implementing logic past simple if/else statements is a pain.

After messing around with the plug-in for a few hours, my head began to hurt from trying to distinguish the markup in my template from the millions of double curly braces.

So I popped an aspirin and began work on an alternative. And here it is…

 

The template

 

The JavaScript

$(function ()
{
    // Define an array of animals to be rendered out by the template
    var animals = [
        { species: "Moose", strength: 8, dexterity: 4 },
        { species: "Sloth", strength: 2, dexterity: 0 },
        { species: "Alpaca", strength: 6, dexterity: 9 },
        { species: "Blobfish", strength: 1, dexterity: 2 },
        { species: "Squirrel", strength: 10, dexterity: 10 }, // Squirrels... crazy dangerous!
        { species: "Badger", strength: 4, dexterity: 6 },
        { species: "Emu", strength: 2, dexterity: 8 }
    ];

    // Compile and cache the template
    $.template("animals_template_compiled", $("#animals_template"));

    // Create a render-function which implements complex logic
    function renderer(animal)
    {
        // If an animals strength is rated higher than 5 and if it's dexterity is rated
        // higher than 3... or if the animal is the insanely dangerous squirrel; return
        // it's name in bold
        if ((animal.strength > 5 && animal.dexterity > 3) || animal.species === "Squirrel")
        return "" + animal.species + "";

        // If not; return it's name without the bold tags
        return animal.species;
    }

    // Render the template
    var output = $.tmpl("animals_template_compiled", animals, { render: renderer });

    // Append the rendered template to the DOM
    $("#animals_template_output").append(output);
});

 

The markup in which to place the output of the template

Be warned!
The animals highlighted will probably tear off your arms
It would be a bad idea to try and pet them

 

The result

 

… But you get the point

I know that the logic contained in the render function is not that complex. But you get the point: complex logic is best expressed in JavaScript and not by using hard-to-read syntax, plastered into HTML.

 

For the purists

I am aware that I’m breaking the whole model/view/controller concept by using a function to render out part of the template. But enabling full separation of logic and markup is possible. All you have to do is return a boolean value in the renderer function and update your template a tiny bit.

 

The updated template

 

The updated JavaScript

function isDangerous(animal)
{
    if ((animal.strength > 5 && animal.dexterity > 3) || animal.species === "Squirrel")
    return true;
}

var output = $.tmpl("animals_template_compiled", animals, { isDangerous: isDangerous });

This entry was posted on Thursday, February 10th, 2011 at 20:10 and is filed under JavaScript, jQuery. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.