jQuery Templating and Datalinking

1,465 views

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,465
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
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

×