[google-jstemplate] r12 committed - Created wiki page through web user interface.
google-j...@googlecode.com
Author: west...@google.com
Date: Fri Feb 17 15:00:15 2012
Log: Created wiki page through web user interface.
http://code.google.com/p/google-jstemplate/source/detail?r=12
Modified:
/wiki/PageName.wiki
=======================================
--- /wiki/PageName.wiki Fri Feb 17 14:57:31 2012
+++ /wiki/PageName.wiki Fri Feb 17 15:00:15 2012
@@ -1,6 +1,43 @@
-#summary What is JsTemplate?
-
-=What is JsTemplate?=
-JsTemplate (or "Jst" for short) is a javascript library that provides
client-side processing and reprocessing of HTML templates. As all template
systems do, Jst separates data from its presentation in HTML. Two features
set Jst apart from other template systems, however: its processing of
templates on the client-side using javascript, and its ability to update
the output of a previously processed template to reflect changes in the
data. These features make it well suited for use in AJAX applications,
which aim to give immediate feedback on the client-side.
-
-If you are a software engineer working on a web application that will use
javascript to update the display of data in the browser, Jst might make
your job easier. If, for example, you are building an email application
that will periodically download new message information, you may want to
update the list of messages displayed without getting a new version of the
page from the server. While a server-side templating system such as PHP
would require you to assemble a new representation of the data on the
server, Jst allows you to update the display to reflect new data without
having to download any new formatting information.
+#summary Quick example.
+
+=Quick Example=
+Here is an example template:
+{{{
+ <div id="t1">
+ <h1 jscontent="title"></h1>
+ <ul>
+ <li jscontent="$this" jsselect="favs"></li>
+ </ul>
+ </div>
+}}}
+The template is just HTML with some special attributes. The $this variable
refers to the data that template processing attaches to the `<li>` element
(see the Processing Environment section of the Reference for details). Here
is an example of javascript data this template can be used to display:
+{{{
+ var favdata = {
+ title: 'Favorite Things',
+ favs: ['raindrops', 'whiskers', 'mittens']
+ };
+}}}
+And here is a function that fills in the template with the data:
+{{{
+ function showData(data) {
+ var input = new JsEvalContext(data);
+ var output = document.getElementById('t1');
+ jstProcess(input, output);
+ }
+}}}
+Calling the above function (in, for example, an onload handler like `<body
onload="showData(favdata)">`) produces the following structure:
+{{{
+ <div jstcache="0" id="t1">
+ <h1 jstcache="1" jscontent="title">Favorite Things</h1>
+ <ul jstcache="0">
+ <li jsinstance="0" jstcache="2" jsselect="favs"
+ jscontent="$this">raindrops</li>
+ <li jsinstance="1" jstcache="3" jsselect="favs"
+ jscontent="$this">whiskers</li>
+ <li jsinstance="2" jstcache="4" jsselect="favs"
+ jscontent="$this">mittens</li>
+ </ul>
+ </div>
+}}}
+Note that the special attributes are still there after the template has
been processed. The filled template is still a template, and so it can be
filled again (to show updates after the input data have changed, for
example). The additional attributes jsinstance and jscache are used
internally in order to make this reprocessing more efficient.
+See the Reference for more details about all of the various "js"
attributes in the template. [ 01-quick.html ]