Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 5906638191
Fetching contributors…

Cannot retrieve contributors at this time

83 lines (71 sloc) 2.076 kB
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.tmpl.js"></script>
<script>
jQuery(function(){
var dataObject = {
name: function() {
return this.firstName + " " + this.lastName;
},
firstName: "John",
lastName: "Resig",
url: "http://ejohn.org/",
cityJoin: function() {
return this.cities.join(", ");
},
cities: [
"Boston, MA",
"San Francisco, CA"
]
};
var arrayOfDataObjects = [
$.extend({}, dataObject),
$.extend({}, dataObject),
$.extend({}, dataObject)
];
arrayOfDataObjects[0].age = 25;
arrayOfDataObjects[1].foo = { bar: undefined };
arrayOfDataObjects[1].age = null;
arrayOfDataObjects[1].foo = { bar: null };
arrayOfDataObjects[2].foo = { bar: 'baz' };
var tmpl = '<li>${ $i }) <a href="${ url }">${ name }</a> (age: ${ age }) (${ cityJoin })</li>';
$("#sometmpl")
.render( dataObject ) // Returns a LI with all the data filled in
.appendTo("ul");
$("#sometmpl")
.render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
.appendTo("ul");
$("#sometmpl2")
.render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
.appendTo("ul");
// Appends one LI, filled with data, into the UL
$("ul").append( tmpl, dataObject );
// Appends multiple LI, filled with data, into the UL
$("ul").append( tmpl, arrayOfDataObjects );
});
</script>
<script id="sometmpl" type="text/html">
<li>${$i}) <a href="${ url }">${ name }</a>
{{ ifdef age }}Age:
{{ if age != null }}${ age }
{{ else }}(null)
{{ /if }}
{{ /ifdef }}
{{ ifndef age }}(no age defined){{ /ifndef }}
(${ cityJoin })</li>
</script>
<script id="sometmpl2" type="text/html">
{#
This comment is ignored by the templating engine.
#}
${ foo }
<li>
${ $i }) <a href="${ url }">${ name }</a>
Age:
{{ ifdef age }}${ age }{{ else }}--{{ /ifdef }}
Cities: {{ each cities as i, city }}${ city }{{ /each }}
{{ ifdef foo.bar }}foo.bar is defined{{ /ifdef }}
{{ ifndef foo.bar }}foo.bar not defined{{ /ifndef }}
{{= "['" + foo.bar + "']" }}
</li>
</script>
<ul></ul>
Jump to Line
Something went wrong with that request. Please try again.