So far in my series on jQuery JavaScript Templating, I've showed how to create a basic jQuery JavaScript template and then nest templates for increased layout flexibility and maintainability. Now, let's dive into two other techniques available in the Microsoft jQuery Templates plugin; inline expressions and code blocks.

<h2>Inline Expressions</h2>

Being able to use a template to create a succinct layout is very powerful but without the ability to manipulate the data that's being rendered, you'd probably find templates a lot less useful. That's where inline expressions come in. Inline expressions allow you to use common JavaScript expressions to effect a change in the way your data is rendered. Using a slightly modified version of the data from my last tutorial, I can show you what I mean. Here's the data:

[code language="js"]
var clientData = [
     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },
     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },
     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }
 ];
[/code]

What I did was break out the <em>"name"</em> attribute into <em>"first"</em> and <em>"last"</em> name fields. Now, say I wanted to render the full name in my template. I would use the following <strong>inline expression</strong> to do so:

[code language="js"]
&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;
    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last }&lt;/li&gt;&lt;/p&gt;
&lt;/script&gt;
[/code]

Which gives me the following result:

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/inline.png" alt="" title="inline" width="158" height="178" class="alignleft size-full wp-image-1067" /></a>

Notice that I'm using the standard JavaScript "+" operator to concatenate the two data attributes together to form my final output. JavaScript developers should immediately be able to understand the code here and see how flexible this option is.

<h2>Code Blocks</h2>

Now, while inline expressions are certainly powerful, the ability to affect the data via code blocks is even more important because it allows you to specify conditional statements that can be used to determine what type of and when data will be represented. Let's say that based on the age of a client, I want to show so text next to their name. I'll use the following code block:

[code language="js"]
{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}
[/code]

This code block allows me to specify a conditional statement that allows me to create a nice descriptor based on the person's age. Considering that I'm 42, I'm definitely in the <em>"veteran code"</em> section. ;) 

Here's what the template would look like:

[code language="js"]
&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;
    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 30)}}veteran coder!{{else}}rising star!{{/if}}&lt;/li&gt; &lt;/p&gt;
&lt;/script&gt;
[/code]

which generates the following results:

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/codeblock.png" alt="" title="codeblock" width="246" height="150" class="alignleft size-full wp-image-1074" /></a>

And again, the cool thing is that the syntax for the expressions use standard JavaScript operators so I can do something like this:

[code language="js"]
{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}
[/code]



[code language="js"]
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;meta name=&quot;robots&quot; content=&quot;noindex&quot; /&gt;
  &lt;title&gt;Template Test&lt;/title&gt;
  &lt;script src=&quot;http://code.jquery.com/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;jquery.tmpl.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
 
var clientData = [
     { first: &quot;Rey&quot;, last: &quot;Bango&quot;, age: 42, id: 1, phone: [ &quot;954-600-1234&quot;, &quot;954-355-5555&quot; ] },
     { first: &quot;Mark&quot;, last: &quot;Goldberg&quot;, age: 51, id: 2, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] },
     { first: &quot;Jen&quot;, last: &quot;Statford&quot;, age: &quot;25&quot;, id: 3, phone: [&quot;954-600-1234&quot;, &quot;954-355-5555&quot;] }
 ];
 
        $(&quot;#clientTemplate&quot;).tmpl(clientData).appendTo(&quot;div&quot;);
 
});
  &lt;/script&gt;
 
&lt;script id=&quot;clientTemplate&quot; type=&quot;text/html&quot;&gt;
    &lt;p&gt;&lt;li&gt;${ first + &quot; &quot; + last + &quot; is a &quot; }{{if (age &gt; 20 &amp;&amp; age &lt; 30 || age == 42)}}rising star!{{else}}veteran coder!{{/if}}&lt;/li&gt; &lt;/p&gt;
&lt;/script&gt;
 
&lt;/head&gt;
 
&lt;body&gt;
 
&lt;div&gt;&lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
[/code]