bower install jquery.template.sp
jquery.template
takes a different approach to inserting values into templates, lessening the risk of XSS exploits.
Just pass a CSS selector for the template, and then an object with values. (Templates are cached after first use)
var $el = $.template('#player', {
team: 'green',
image: 'images/green.jpg',
name: 'Gillian Green'
});
Instead of the usualy delimiters and keynames, we'll approach these templates differently. We'll be using CSS classes as directives. Let's start with this example.
<script type="text/template" id="player">
<div class="class-team">
<img class="src-image">
<p class="text-name"></p>
</div>
</script>
We see a <div>
with the class class-team
. What is happening here? Well, class-
is a directive. We add team
after, to signify a connection with the team
value we passed earlier. This directive will add a new class to the <div>
, named green
. If you're following this so far, great. The rest should be easy.
We can also see the <img>
& <p>
tags, both with their own directives. As you might guess, src-
is a directive allowing for updates to the src
attribute. That leaves text-
, which is a directive for updating the inner text of an element. Note: this is done in such a way where HTML inside of values is not parsed, since that leads to the classic security issues.
After all this, what do we get? A jQuery wrapped HTML element, ready to be given a new home. Let's be quaint, and append it to the <body>
.
$('body').append($el);
So far:
- class- (adds a class)
- href- (updates href attribute)
- src- (updates src attribute)
- target- (updates target attribute)
- text- (updates inner text)
Please, feel free to ask for more. Just make a PR or issue in GitHub.