Sanitized JQuery Templates Test

JQuery templates make sure that the results of expressions in ${…} are encoded via $.encode(…), but this is not always ideal. Below, you can experiment with a JQuery template rewriter that adds encoding functions to ${…} based on the context in which they appear. You can use the buttons below to choose examples and play around with the templates and data. For more details, you can read about the design or peruse the source and tests.

That source code includes a rewriter from JQuery templates to JQuery templates. It compresses well. If you want to rewrite templates in the browser, the download is less than 6kB gzipped, but if you want to rewrite the templates before serving them, then the only download is the escaping functions which takes less than 1.5kB gzipped.

[ permalink ]

Template Source		Template Source w/ sanitizers
Enter your jQuery templates below or select one of the examples above to prefill with an example.
<!-- A jQuery template named "helloWorld" --> <script type="text/x-jquery-tmpl" id="helloWorld"> Hello, <b onclick="alert(${world})"> ${world} </b>! </script>
Data for Template		Rendered Template
Enter JSON data to pass to the template below.
{ value: 42, color: red, name: 'John Doe', "bars": ['foo1', 'foo2'], world: 'Cincinatti' }

Last modified: Mon Apr 18 16:58:50 PDT 2011

Sanitized JQuery Templates Test

Template Source

Template Source w/ sanitizers

Data for Template

Rendered Template