Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

jQuery Templating and Datalinking

  • 1,723 views
Uploaded 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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,723
On Slideshare
1,723
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
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. jQuerYTemplating & 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 – ViewModelish
  • 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. JqueryTemplating
    Cloning
    varnewEl = $("# ContactRowTemplate ").clone() .attr("id",item.ContactId) .fadeIn("slow");
    jTemplates
    Python-Like Syntax
    MicroTemplating
    $("#tblContactListtbody").empty()
    .html($("#ContactRowTemplate")
    .parseTemplate({ contacts: response.Contacts }));
    http://ejohn.org/blog/javascript-micro-templating/
    http://www.west-wind.com/Weblog/posts/509108.aspx
  • 9. JqueryTemplating
    <script id="ContactRowTemplate" type="text/html">
    <# for(vari=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><imgsrc="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