jQuery Forum

1. I liked your method of extracting templating logic from existing script elements on the page. This should be baked in to the initial implementation as it makes a lot of sense.
2. The current proposal only has a way to directly inject some HTML into the page (using .html()). This removes much of the flexibility of DOM manipulation in jQuery. There needs to be, at minimum, a way to generate a templated node that can be injected elsewhere, later, and a way to inject a node dynamically (using append, etc.) while still having access to the templating layer.
3. I like the proposal of having a cache where named templates can be stored and easily retrieved. I think we should probably require that any templates in there are pre-compiled (to save later checks and compilation steps).
4. I'm not sure I understand the benefit of the callbacks in the proposal - do you have any examples of where they might be used?

1. I'm not a huge fan of the {{ ... }} syntax - it seems like, especially in the context of JavaScript, there are cases where that could result in ambiguous templates. For example: "{{ data = {user:{name:'John'}}; }}". In the case of my micro templating syntax it's very hard for there to be potential conflicts.
2. I think the default method that prints content out (named 'write' or 'print' or whatever) should allow HTML by default and only encode the output when requested. Perhaps the methods could be named 'html' and 'text' (to coincide with the jQuery methods of the same name).
3. I'm not seeing the particular merit of nested templates - are there any other examples?
4. Having $dataItem and $index (or similar) seems quite useful - didn't think of that previously.
   
5. I see the merit of $id() (and similar functions) although I don't think that that's something that we'd ship in the default implementation - having a way to easily snap in new functions would be really nice. (jQuery.tmplFn.$id = ...;)
   

While in theory I tend to like having real markup/DOM be transformed into other DOM structure in practice I find it to be clunky and cumbersome

Sorry that the current syntax "barfs" in ASP but I suspect that any templating syntax that we pick will "barf" in some server-side syntax-highlighter somewhere - we'll need to standardize on something - and that might as well be an existing templating syntax.

1. Welcome {{ first_name }}, {{ last_name }}.

1. {% for athlete in athlete_list %}
2.     <li>{{ athlete.name|capfirst }}</li>
3. {% endfor %}

1. {% for (var i=0; i < athlete_list.length; i++) {
2.   html('<li>' + capfirst(athlete_list[i].name) + '</li>');
3. } %}

1. <script type="text/x-jquery-template-library" id="local-xml-library-definition">
           <!-- text/xml format -->
           <template-library error-template="">
           
               <!--
                   In the first level the templates are declared.
                   When the template is requested and does not exist nothing is rendered.
                   If an error happens during that procedure the core uses the error-template.
                   When the 'binding' does not have any value the empty-template is used.
                   When the 'binding' needs to do a resource resolve ($.get / $.ajax)
                       the loading-template is used to show possible delay.
               -->
               <tree-view>
                   <tree-node empty-template="no-tree-nodes" />
               </tree-view>
               
               <tree-node empty-template="" loading-template="entity-link-loader">
                   <div>
                       <a href='#{{= $(this).attr("name") }}'>
                           <img src="{{= $(this).attr("imageUrl") }}" alt="{{= $(this).attr("name") }}" />
                           <span>{{= $(this).attr("name") }}</span>
                       </a>
                       <!--
                           The following shows includance in the specific point.
                           The query queries the $(this) of the data source (for example).
                       -->
                       <tree-node query="node" empty-template="no-field-entity-link" />
                   </div>
               </tree-node>
               
               <no-tree-nodes>
                   <!-- empty - nothing is rendered here -->
               </no-tree-nodes>
               
               <no-field-entity-link>
                   <div>There are no classes in this instance</div>
               </no-field-entity-link>
               
               <!--
                   Includance example
               -->
               <centered-element>
                   <div class="centered-somewhere">
                       <contents />
                   </div>
               </centered-element>
               
               <entity-link-loader>
                   <centered-element> <!-- you can use another template to produce wrapper -->
                       <img src="loading.gif" alt="Loading..." />
                   </centered-element>
               </entity-link-loader>
               
               <!-- hopefully some parts of library could be lazy-loaded from a server -->
               <remote-enabled-field-entity-link url="http://tempuri.org/remoteLibrary.xml" loading-template="entity-link-loader" />
           </template-library>
       </script>

Wow, thank you everyone -- there's some really great feedback and thoughts in this thread!

We forked the prototype from John here:
http://github.com/nje/jquery-tmpl

And iterated on it with some ideas based on the feedback in this thread. We also updated our proposal on the wiki here:
http://wiki.github.com/nje/jquery/jquery-templates-proposal#jquerycore

One thing said multiple times in this thread is concern over the templates becoming too complex. In this update we propose ideas that allow you to keep templates simple, but without departing from using javascript as the expression language. In fact, with these ideas, it is completely possible to have no expressions in the template at all, or to have only very simple ones, no matter how complex your scenario might be.

There are three main things that complicate templates:

1. Embedding calculated values or expressions, such as formatting a number as currency, or a date in a readable form, handling nulls, etc.

2. Iterating over nested data.

3. Conditional logic

The updated proposal shows how you can use two callbacks to deal with these issues in a way that keeps the code in your javascript and out of your template, even if you have nested data to display. Please do look at the proposal or jump straight to the git fork -- it also has an updated demo.html. The proposal itself goes into more details and examples.

1. function evaluateTemplate(templateName)
   {
       var html = $("script#" + templateName + "[type='text/x-jquery-template']").html();
                       
       if (!html || typeof(html) != "string" || html.match(/^\s*$/))
           return "";
       
       // Change string and return by executing the resulting html string
       html = html.replace(/[\n\r\t\s]+/g, " ");
       htmlParts = html.split("{{");
       for(var n = 0; n < htmlParts.length; ++n)
       {
           if (htmlParts[n].indexOf("}}") > -1)
           {
               var subParts = htmlParts[n].split("}}");
               subParts[1] = subParts[1].replace(/"/g, "\\\"");
               htmlParts[n] = subParts.join("}}");
           }
           else htmlParts[n] = htmlParts[n].replace(/"/g, "\\\"");
       }
       html = htmlParts.join("{{");
       
       // Replace the information with evaluation
       
       // After binding {{:after ... }} [code that runs after binding]
       var afterMethod = html.match(/\{\{\:after(.+?)\}\}/g);
       if (afterMethod)
       {
           afterMethod = eval("(function __stub() { return function() { " + afterMethod[0].replace(/\{\{\:after(.+?)\}\}/g, "$1") + "} })();");
           html = html.replace(/\{\{\:after(.+?)\}\}/g, "");
       }
       
       // Entries {{@ ... }} [template content entry point]
       // html = html.replace(/\{\{@(.+?)\}\}/g, "\" + $1 + \"");
       // String evaluation {{= ... }} [append to output]
       html = html.replace(/\{\{=(.+?)\}\}/g, "\" + $1 + \"");
       // Logic evaluation {{ ... }} [run accross output]
       html = html.replace(/\{\{(.+?)\}\}/g, "\"; $1 \"");
       
       html = "\"" + html + "\"";
       
       html = eval(html);
       
       return { "html" : html, "after" : afterMethod };
   }

<div id="template_pattern" class="template">
        <ul>
	        <li>|%= name %| - |%= price %|</li>
        </ul>
</div>

<div id="template_pattern" class="template">
        <ul>
	        <li>|%= name %| - |%= price %|</li>
        </ul>
</div>

<li>|*%= name %*| - |*%= price %*|</li>

<div>|* some comments goes here *|</div>

1. <script type="text/javascript">
2.   $(function() {
3.     var template = "#template";
4.     var model = [
5.       { name: "Bob Smith", dob: "1976-10-1", phones: [
6.          {name:"Home",value:"555-1111"},
7.          {name:"Mobile",value:"555-2222"}
8.       ] },
9.       { name: "Sue Black", dob: "1984-6-23", phones: [
10.          {name:"Office",value:"555-3333"}         
11.       ] }
12.     ];
13.     var view = {
14.       /* Only show users over 30 years old */
15.       over30: {
16.         _visible: function(context) { 
17.           if (calcAge(context.dob) > 30) return true;
18.           return false;
19.         },
20.         /* Override dob with custom output */
21.         dob: function(context) {return prettyDob(context.dob);},
22.         /* Add additional calculated value */
23.         age: function(context) {return calcAge(context.dob);},
24.         phones: {
25.           /* Override phone number to include international prefix */
26.           value: function(context) {return formatPhone(context.value);}
27.         }
28.       }
29.     function calcAge(dob){ return ... };
30.     function prettyDob(dob){ return ... };
31.     function formatPhone(phone) { return "001-"+phone };
32. 
    
33.     $("ul").append(template, model, view);
34.   });
35. </script>

1. <script id="template" type="text/html">
2.   <li class="over30">
3.     <div>
4.       <strong class="name"/>: 
5.       Born on <span class="dob"/> 
6.       (<span class="age"/> years old)
7.     </div>
8.     <ul class="phones">
9.       <li>
10.         <strong class="name"/>: 
11.         <span class="value"/>
12.       </li>
13.     </ul> 
14.   </li>
15. </script>
16.  
17. <ul></ul> 

1. <ul>
2.   <li class="over30">
3.     <div>
4.       <strong class="name">Bob Smith</strong>: 
5.       Born on <span class="dob">October 1, 1976</span> 
6.       (<span class="age">33</span> years old)
7.     </div>
8.     <ul class="phones">
9.       <li>
10.         <strong class="name">Home</strong>: 
11.         <span class="value">001-555-1111</span>
12.       </li>
13.       <li>
14.         <strong class="name">Mobile</strong>: 
15.         <span class="value">001-555-2222</span>
16.       </li>
17.     </ul> 
18.   </li>
19. </ul>

1. //A sample of template IL (json) that could be created from a higher scripting language
2. //IL keys are evaluated to either tag or attribute and written to buffer
3. //Data is always passed as first parameter to any functions in the template
4. //"this" evaluates to the template buffer
5.     var il = {
6. 
   
7.         table: [{style: 'solid 1px'}, {
8.             thead: [{
9.                 th: 'Column 1',
10.                 th: 'Column 2'
11.             }],
12.             tbody: function(data) {
13. 
    
14.                 //Nested template here
15.                 var il2 = {
16.                     tr: [{
17.                         td: function(row) {
18.                             this.write(row.Id);
19.                         },
20.                         td: function(row) {
21.                             this.write(row.Name);
22.                         }
23.                     }]
24.                 }
25.                 
26.                 //Combine template with data for each row
27.                 for (var i=0; i<data.rows.length;i++)
28.                 {
29.                     this.write($.templ(il2, data));
30.                 }
31.             }
32.         }]
33.     };
34. 
    
35.     //Replace contents of div with combination of template IL and data
36.     //Note can use existing manipulation functions such as prepend etc
37.     $(div).html($.templ(il, data));

1.  <div class = '" *is_node?<node_class><leaf_class>" ></div>