From jQuery JavaScript Library
« Back to Plugins/SuperFlyDOM
tplPrepend( target, template )
The method that you use to map a set of key/value pairs to a template & prepend a new DOM tree from the result.
Maps a set of key/value pairs to a template (a function which returns a JSON Array of elements, attributes, and text nodes), transforms the result into a DOM tree, and then prepends it to the parent element.
Method tplPrepend creates a DOM tree from a template, and optionally maps key/value pairs onto the template.
Arguments:| target | Map | |
|---|
| this or set of key/value pairs |
| template | Function | |
|---|
| A template function which returns an Array containing the same arguments as the createPrepend method (element, attribute map, and children) |
Examples:| Name | Type |
|---|
This is an example of a template function - a JSON DOM structure with (optionally) variables to map in. Of course, the true power is in filling the data object with values from a database or user input - you are only limited by your imagination!
var tpl = function() {
return [
'div', { className: "firstdiv" }, [
"h3", [this.headline],
"this text will become a textnode after h3",
"span", { id: "spanid", style: this.spanStyleObj }, [
"b", ["(bold) textnode in span"],
],
this.endtext
]
]
};
var data = {
headline: "Header for H3",
endtext: "goodbye",
spanStyleObj: {
letterSpacing: -1,
backgroundColor: "#DDD"
}
};
Prepends a DOM tree to parent element from template, mapping in key/value pairs from data object.
$(".selector").tplPrepend(data, tpl);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".selector").tplPrepend(data, tpl);
});
</script>
</head>
<body>
<html>
<head>
<script src="jquery-1.1.4.js"></script>
<script src="jquery.superflydom-0.9g.js"></script>
</head>
<body>
<div class="selector">
<div>Selector's Child Div</div>
</div>
</body>
</html>
</body>
</html>
However, if your template is static (you don't need to fill in values from data), pass
this as the target.
$(".selector").tplPrepend(this, tpl);
