Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery-tmpl.js vs handlebars.js - http://catchvar.com/jquery-tmpljs-vs-handlebarsjs
<!-- templates -->
<script id="summary" type="text/x-handlebars-template">
{{#users}}
{{>summaryItem}}
{{/users}}
</script>
<script id="summaryItem" class="partial" type="text/x-handlebars-template">
<li id="user_{{id}}" class="summary_item">
<p>{{name}}</p>
</li>
</script>
<script id="details" type="text/x-handlebars-template">
<li id="user_{{id}}" class="detail_item">
<p>{{name}}</p>
<p>level: {{level}}</p>
</li>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "users": [{"id": "0", "name": "Justin", "level": "0" }, {"id": "1", "name": "Mark", "level": "2"}]};
$(document).ready(function() {
var
summary = Handlebars.compile( $("#summary").html() ),
summaryItem = Handlebars.compile( $("#summaryItem").html() ),
details = Handlebars.compile( $("#details").html() ) ;
Handlebars.registerPartial("summaryItem", $("#summaryItem").html() );
$("ul").append( summary(data) );
$(document).delegate(".summary_item", "click", function() {
var
attrId = $(this).attr("id"),
id = attrId.substr(attrId.indexOf("_") + 1);
$(this).replaceWith( details(data.users[id]) );
})
.delegate(".detail_item", "click", function() {
var
attrId = $(this).attr("id"),
id = attrId.substr(attrId.indexOf("_") + 1);
$(this).replaceWith( summaryItem(data.users[id]) );
});
});
</script>
<!-- templates -->
<script id="intro" type="text/x-handlebars-template">
<ul>
{{#users }}
<li>Hello, {{ name }}</li>
{{/users}}
{{^users}}
No Users
{{/users}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "users": []};
$(document).ready(function() {
var template = Handlebars.compile( $("#intro").html() );
$("body").append(template(data));
});
</script>
<!-- templates -->
<script id="intro" type="text/x-handlebars-template">
<ul>
{{#users }}
<li>
<p>Hello, {{ name }}</p>
<p>You are level {{ level }} </p>
</li>
{{/users}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "users": [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}]};
$(document).ready(function() {
var template = Handlebars.compile( $("#intro").html() );
$("body").append(template(data));
});
</script>
<!-- templates -->
<script id="tmpl_store" type="text/x-handlebars-template">
<ul>
{{#products}}
<li id="product_{{ id }}">
<h2>{{ name }}</h2>
<p>{{ description }}</p>
<div>
<span>{{ formatPrice this }}</span>
<input type="submit" value="Add to cart" />
</div>
</li>
{{/products}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = {
"products": [{
"id": "0",
"name": "Ultralight Quickdraw set ",
"description": "Easy to use quickdraws",
"price": "13.0",
"currency": "pound"
}, {
"id": "1",
"name": "Backpacking Tent",
"description": "Stay dry and light on your next backpacking trip",
"price": "158",
"currency": "euro"
}
]
};
Handlebars.registerHelper("formatPrice", function(product) {
var
price,
currency = {
dollar: "$",
euro: "\u20AC",
pound: "\u00A3"
};
price = parseInt(product.price).toFixed(2);
for (var key in currency) {
if ( product.currency === key ) {
return currency[key] + price;
}
}
return "$" + price;
});
$(document).ready(function() {
var
store = Handlebars.compile( $("#tmpl_store").html() );
$("body").append( store(data) );
});
</script>
<!-- templates -->
<script id="intro" type="text/x-handlebars-template">
<p>
Hello, {{ name }}
</p>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "name": "Justin" };
$(document).ready(function() {
var template = Handlebars.compile($("#intro").html());
$("body").append(template(data));
});
</script>
<!-- templates -->
<script id="summary" type="text/x-jquery-tmpl">
<li class="summary_item">
<p>${name}</p>
</li>
</script>
<script id="details" type="text/x-jquery-tmpl">
<li class="detail_item">
<p>${name}</p>
<p>level: ${level}</p>
</li>
</script>
<!-- code -->
<script type="text/javascript">
var data = [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}];
$(document).ready(function() {
$("#summary").template("summary");
$("#details").template("details");
$("ul").append($.tmpl("summary", data));
$(document).delegate(".summary_item", "click", function() {
var selectedItem = $.tmplItem(this);
selectedItem.tmpl = $.template["details"];
selectedItem.update();
})
.delegate(".detail_item", "click", function() {
var selectedItem = $.tmplItem(this);
selectedItem.tmpl = $.template["summary"];
selectedItem.update();
});
});
</script>
<!-- templates -->
<script id="intro" type="text/x-jquery-tmpl">
<ul>
{{if users.length }}
{{each users }}
<li>Hello, ${ name }</li>
{{/each}}
{{else}}
No users
{{/if}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "users": []};
$(document).ready(function() {
$("#intro").template("intro");
$("body").append($.tmpl("intro", data));
});
</script>
<!-- templates -->
<script id="intro" type="text/x-jquery-tmpl">
<ul>
{{each users }}
<li>
<p>Hello, ${ name }</p>
<p>You are level ${ level } </p>
</li>
{{/each}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "users": [{"name": "Justin", "level": "0" }, {"name": "Mark", "level": "2"}]};
$(document).ready(function() {
$("#intro").template("intro");
$("body").append($.tmpl("intro", data));
});
</script>
<!-- templates -->
<script id="tmpl_store" type="text/x-jquery-tmpl">
<ul>
{{each products}}
<li id="product_{{ id }}">
<h2>{{= name }}</h2>
<p>{{= description }}</p>
<div>
<span>{{= price }}</span>
<input type="submit" value="Add to cart" />
</div>
</li>
{{/each}}
</ul>
</script>
<!-- code -->
<script type="text/javascript">
var data = {
"products": [{
"id": "0",
"name": "Ultralight Quickdraw set ",
"description": "Easy to use quickdraws",
"price": "13.0",
"currency": "euro"
}, {
"id": "1",
"name": "Backpacking Tent",
"description": "Stay dry and light on your next backpacking trip",
"price": "158",
"currency": "pound"
}
]
};
$(document).ready(function() {
var i, len, product;
// Alter JSON data before displaying template
for ( i = 0; len = data.products.length, i < len; i++ ) {
product = data.products[i];
product.price = formatCurrency(product.price, product.currency);
}
// Display template
$("#tmpl_store").template("details");
$("body").append($.tmpl("details", data));
});
function formatCurrency(price, currency) {
var
formattedPrice,
currencyMap = {
"dollar": "$",
"euro": "\u20AC",
"pound": "\u00A3"
};
formattedPrice = parseInt(price).toFixed(2);
for (var key in currencyMap) {
if ( currency === key ) {
return currencyMap[key] + formattedPrice;
}
}
return "$" + formattedPrice;
}
</script>
<!-- templates -->
<script id="intro" type="text/x-jquery-tmpl">
<p>
Hello, ${ name }
</p>
</script>
<!-- code -->
<script type="text/javascript">
var data = { "name": "Justin" };
$(document).ready(function() {
$("#intro").template("intro");
$("body").append($.tmpl("intro", data));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.