Dear Wiki user, You have subscribed to a wiki page or wiki category on "Couchdb Wiki" for change notification.
The "Generating HTML from Javascript shows and lists" page has been changed by RogerBinns. The comment on this change is: Mention html generation functions in best practises, move html escaping there. Add Google's Closure Templating.. http://wiki.apache.org/couchdb/Generating%20HTML%20from%20Javascript%20shows%20and%20lists?action=diff&rev1=3&rev2=4 -------------------------------------------------- == Best Practise == Generate clear concise simple HTML from your show/list functions. The resulting HTML interface should be usable from constrained devices (eg cell phones, set top boxes) as well as being accessible (eg screen readers) and easy to index for search engines. This is also easier to automatically test. You can then run Javascript in the browser (if the browser supports Javascript and it is turned on) to enhance what is being displayed (eg add extra information, tooltips, icons, previews of next/previous content, enhanced menus and interaction etc). + + It is a '''very''' good idea to use a library that automatically escapes values (eg replacing < with ampersand lt semicolon) otherwise your application will be prone to [[http://en.wikipedia.org/wiki/Cross-site_scripting|cross site scripting attacks]]. It should also provide a way of disabling the escaping when you are intentionally providing raw HTML. + + It is convenient if the library has functions for emitting html. For example it may have a function to insert an image where you provide the URL and the function generates all the wrapping HTML, including width/height/caption attributes if you provided them. == Constraints == The Javascript view server and the environment the code run in mean that some existing Javascript templating libraries will not work. @@ -14, +18 @@ * Some work on complete documents whereas your show and especially list functions are often working on multiple strings and template fragments * Some only do HTML - this is good if they ensure the result is correct HTML * Some do any form of templating (eg plain text) which means your resulting HTML can be invalid - * It is a very good idea to use a library that automatically escapes values (eg replacing < with ampersand lt semicolon) otherwise your application will be prone to [[http://en.wikipedia.org/wiki/Cross-site_scripting|cross site scripting attacks]]. It should also provide a way of disabling the escaping when you are intentionally providing raw HTML. * Size can be a problem. Some templating libraries are rather large and depend on other libraries. They can create many layers of intermediary functions and caching making it hard to debug what is happening. == Solutions == @@ -34, +37 @@ Foo is not true-ish <% } %> }}} + + Note that this library has no support, bug tracker or development/test/release process. + === mustache.js === [[http://github.com/janl/mustache.js|mustache.js]] is a Javascript version of a Ruby templating library. The name refers to the { and } characters looking like a mustache. Download http://github.com/janl/mustache.js/raw/master/mustache.js to get the latest version which drops right in using !json/!code as is. @@ -42, +48 @@ === underscore === [[http://documentcloud.github.com/underscore/|Underscore]] is a small library of miscellaneous functions that also includes simple [[http://documentcloud.github.com/underscore/#template|templating]] substantially similar to John Resig's micro templating above. The templating is not HTML specific and there is no automatic HTML escaping. + === closure === + [[http://code.google.com/closure/templates/|closure templates]] are a Google project used behind the scenes in places like gmail and Google docs. It is different from the other libraries in that the templates are compiled to Javascript code and you just include that Javascript code. This has the advantage that errors in your templates are detected at build time not run time. Values are automatically HTML escaped. In order for soyutils.js to work, you should include this line before including it: + + {{{ + var navigator={userAgent: ""}; + }}} +
