JQUERY TEMPLATING & DATA LINKING
Chris Love
Tellago Inc.
http://ProfessionalASPNET.com
http://Twitter.com/ChrisLove
BOOKS
REFERENCES
 Templating
 http://github.com/nje/jquery-tmpl
 http://forum.jquery.com/topic/jquery-templates-
proposal
 D...
WHAT DOES AJAX MEAN?
 Transparent Interaction w/Server
 Slicker User Experience
 Modern Web Architecture Changed
Enter ...
MVVM APPLICATIONS
Model - jQuery
View – HTML/CSS
View – ie Service End Point/MVC View
Model – EF/nHibernate etc
JQUERY AJAX FEATURES
 Very Flexible
 Global Event Handlers
 Graceful Event Handling
 All the Super Goodness Baked into...
JSON
 The Data Format
 LCD Simple (And that’s the way I like it!)
 WCF Just Handles it for Us!
 JSON2 from Crockford (...
JQUERY TEMPLATING
 Cloning
 var newEl = $("# ContactRowTemplate ").clone()
.attr("id",item.ContactId) .fadeIn("slow");
...
JQUERY TEMPLATING
<script id="ContactRowTemplate" type="text/html">
<# for(var i=0; i < contacts.length; i++)
{
var contac...
JQUERY TEMPLATING
 Merging Micro-Templating Concepts
w/ASP.NET Templating Functionality
 Add
 Nested Templates
 Inline...
 Connecting Interaction Between Things
 One-Way or Two-Way Binding
 Custom Transformations
JQUERY DATA LINKING
Upcoming SlideShare
Loading in …5
×

jQuery Templating and Datalinking

1,320
-1

Published on

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

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Templating and Datalinking

  1. 1. JQUERY TEMPLATING & DATA LINKING Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove
  2. 2. BOOKS
  3. 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. 4. WHAT DOES AJAX MEAN?  Transparent Interaction w/Server  Slicker User Experience  Modern Web Architecture Changed Enter Model/View – ViewModel ish
  5. 5. MVVM APPLICATIONS Model - jQuery View – HTML/CSS View – ie Service End Point/MVC View Model – EF/nHibernate etc
  6. 6. JQUERY AJAX FEATURES  Very Flexible  Global Event Handlers  Graceful Event Handling  All the Super Goodness Baked into jQuery!!!
  7. 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. 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. 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. 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. 11.  Connecting Interaction Between Things  One-Way or Two-Way Binding  Custom Transformations JQUERY DATA LINKING

×