Overview of using the new jQuery Templating and DataLinking plugins to build MVVM AJAX Applications

1. JQUERY TEMPLATING & DATA LINKING
Chris Love
Tellago Inc.
http://ProfessionalASPNET.com
http://Twitter.com/ChrisLove

2. BOOKS

3. REFERENCES
 Templating
 http://github.com/nje/jquery-tmpl
 http://forum.jquery.com/topic/jquery-templates-
proposal
 Data Linking
 http://github.com/nje/jquery-datalink

4. WHAT DOES AJAX MEAN?
 Transparent Interaction w/Server
 Slicker User Experience
 Modern Web Architecture Changed
Enter Model/View – ViewModel
ish

5. MVVM APPLICATIONS
Model - jQuery
View – HTML/CSS
View – ie Service End Point/MVC View
Model – EF/nHibernate etc

6. JQUERY AJAX FEATURES
 Very Flexible
 Global Event Handlers
 Graceful Event Handling
 All the Super Goodness Baked into
jQuery!!!

7. JSON
 The Data Format
 LCD Simple (And that’s the way I like it!)
 WCF Just Handles it for Us!
 JSON2 from Crockford (extended by
Strahl * Demsak)
 http://JSON.org

8. JQUERY TEMPLATING
 Cloning
 var newEl = $("# ContactRowTemplate ").clone()
.attr("id",item.ContactId) .fadeIn("slow");
 jTemplates
 Python-Like Syntax
 MicroTemplating
$("#tblContactList tbody").empty()
.html($("#ContactRowTemplate")
.parseTemplate({ contacts:
response.Contacts }));
http://ejohn.org/blog/javascript-micro-templating/
http://www.west-wind.com/Weblog/posts/509108.aspx

9. JQUERY TEMPLATING
<script id="ContactRowTemplate" type="text/html">
<# for(var i=0; i < contacts.length; i++)
{
var contact = contacts[i];
#>
<tr>
<td>
<#=contact.FirstName#> <#=contact.LastName#>
</td>
<td>
<#=contact.City#>
</td>
<td>
<#=contact.State#>
</td>
<td><img src="images/edit.gif" onclick="GetContactInfo(<#=contact.ContactId#>);"
/></td>
</tr>
<# } #>
</script>

10. JQUERY TEMPLATING
 Merging Micro-Templating Concepts
w/ASP.NET Templating Functionality
 Add
 Nested Templates
 Inline Templating
 Custom Rendering Functionality*
*Not Yet Implemented To My Knowledge

11.  Connecting Interaction Between Things
 One-Way or Two-Way Binding
 Custom Transformations
JQUERY DATA LINKING