CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Simplifying jQuery tmpl interface

In one of my previous posts I showed a simple example how to retrieve data from a web service and render it with jQuery tmpl. To render this I used an id for a template and the container:

<script id="contactTemplate" type="text/html">
    <div>
        Name: {{= Name }} <br>
        Phone: {{= Phone }}
    </div>
</script>

<div id="contactContainer"></div>

To render we select the template and container with jQuery selectors:

function onSuccess(data) {
	$("#contactTemplate").tmpl(data.d.results).appendTo("#contactContainer");
}

On a page with multiple templates and containers it can be a djungle of different ids you have to track. Johan Leino in his great blog post provides a better and simpler way to organize containers and templates. The solution is to extend jQuery selectors (like :even, :odd and more) and introduce two new: :template and :container. This code comes from Johan Leino:

(function ($, undefined) {
    if ($ === undefined) {
        throw "Dependency: jQuery is not defined. Please check javascript imports.";
    }
    $.extend($.expr[':'],
    {
        // :template(name)
        template: function (current, index, metadata, elements) {
            var arg = metadata[3],
                d = $(current).data("template-for");
            if (d === undefined) {
                return false;
            }
            return arg ? arg === d : true;
        },
        // :container(name)
        container: function (current, index, metadata, elements) {
            var arg = metadata[3],
                d = $(current).data("container-for");
            if (d === undefined) {
                return false;
            }
            return arg ? arg === d : true;
        }
    });
} (jQuery));

Now we can forget the ids:

<script type="text/html" data-template-for="contacts">
    <div>
        Name: {{= Name }} <br>
        Phone: {{= Phone }}
    </div>
</script>

<div data-container-for="contacts"></div>

Our onSuccess method will look like:

function onSuccess(data) {
    var $container = $(":container(contacts)");
    var $template = $(":template(contacts)");
    $template.tmpl(data.d.results).appendTo($container);
}

Much simpler, isn’t it? More possibilities to write more generic js code, like extracting “contacts” into a variable. One thing I would like to know how performance is in older IE browsers for custom jQuery selectors.

See my post about nested templates where I implement these selectors.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

| Blockchain | Serverless Architecture | Microservices Architecture | DevOps | AWS Lambda | Teraform |

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: