javascript template engine compare

Google Closure Templates

+ Templates are compiled into JavaScript for client-side and Java for server-side.
+ Good built-in functionality: loops, conditionals, partials, i18n.
+ Documentation is enforced by the template.
– Very little usage outside of Google. No plans to push new versions or accept new contributions.
– Some functionality is missing, such as being able to loop over maps.
– Not DRY: adding new functionality requires implementing plugins in both Java and JavaScript.
Mustache

+ Very popular choice with a large, active community.
+ Server side support in many languages, including Java.
+ Logic-less templates do a great job of forcing you to separate presentation from logic.
+ Clean syntax leads to templates that are easy to build, read, and maintain.
– A little too logic-less: basic tasks (e.g. label alternate rows with different CSS classes) are difficult.
– View logic is often pushed back to the server or implemented as a “lambda” (callable function).
– For lambdas to work on client and server, you must write them in JavaScript.
Handlebars

+ Logic-less templates do a great job of forcing you to separate presentation from logic.
+ Clean syntax leads to templates that are easy to build, read, and maintain.
+ Compiled rather than interpreted templates.
+ Better support for paths than mustache (ie, reaching deep into a context object).
+ Better support for global helpers than mustache.
– Requires server-side JavaScript to render on the server.
Dust.js

+ Logic-less templates do a great job of forcing you to separate presentation from logic.
+ Clean syntax leads to templates that are easy to build, read, and maintain.
+ Compiled rather than interpreted templates.
+ Better support for paths than mustache (ie, reaching deep into a context object).
+ Better support for global helpers than mustache.
+ Inline parameters.
+ Blocks & inline partials.
+ Overriding contexts.
+ Support for asynchronous rendering and streaming.
+ Composable templates.
– Requires server-side JavaScript to render on the server.
– Maintainer of github repo is not responsive.
The Winner: Dust.js

Based on our evaluation and how we prioritized the requirements, dust.js came out as the winner. It was the option that offered the most features and flexibility while keeping the view code DRY, clean, and fast.
Despite some claims to the contrary, we found that for any non-trivial view, none of the templating options worked well across client and server unless the server could also execute JavaScript. Therefore, we’ve been experimenting with Rhino (check out the sample code) and Node.js (check out the sample code) as server-side JavaScript options.
As we roll client-side templates out to more of the site, we have been making tweaks and additions to dust that we hope to contribute back to the open source community. Expect another blog post about that in the future.

ref: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

what is callback in javascript

http://recurial.com/programming/understanding-callback-functions-in-javascript/

http://www.impressivewebs.com/callback-functions-javascript/

how to start a back bone web app development?

http://addyosmani.github.com/backbone-fundamentals/#prelude

why return JSON object is undefine by calling function?

script :

$(document).ready(function() {

var userdata = getData();
};
function getData() {
var udata;
$.getJSON(‘../json/user.json’, function(data) {
udata = data;
});

};

Reason:  $.getJSON (   is async, which it might run later than it call getData();

Solution 1:  disable async

$(document).ready(function() {
var userdata = getData();
};

function getData() {
var udata;
$.ajax({
async: false,
url: ‘../json/user.json’,
dataType: ‘json’,
success: function(response) {
udata = response;
}
});
};
——————

Solution 2:  pass in callback
$(document).ready(function() {
getData(function(data) {
});
};

function getData() {
$.getJSON(‘../json/user.json’, callback, function(udata) {});
};

ref: http://stackoverflow.com/questions/4546339/jquery-assign-json-as-a-result-to-a-variable

SyntaxError: unterminated string literal throws by Javascript in Browser.

SyntaxError: unterminated string literal throws by Javascript in Browser.

possible Cause: special character or line break(\r\n or \n) in processing String not supported by browser.

possible Solution: Escape the String before render HTML.

eg. org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(<String>);