Your SlideShare is downloading. ×
jQuery Templating and Datalinking
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Templating and Datalinking

1,268
views

Published on

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

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,268
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×