Your SlideShare is downloading. ×
jQuery Templates And HTML5 Dan Wahlin
Contact Info <ul><li>Blog </li></ul><ul><li>http://weblogs.asp.net/dwahlin </li></ul><ul><li>Twitter </li></ul><ul><li>@Da...
Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in...
Client-Side Template Solutions <ul><li>HTML templates simplify building AJAX applications: </li></ul><ul><ul><li>Minimize ...
Maintainable Code? <ul><li>var total; </li></ul><ul><li>$(order.Items).each(function() </li></ul><ul><li>{ </li></ul><ul><...
Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in...
jQuery Template Tokens rev 1.0/0510 Chapter 5- {{if}}..{{/if}} {{each}}..{{/each}} ${ Property } {{tmpl}} {{wrap}} {{html}}
jQuery Template Container <ul><li><script id=&quot;MyTemplate&quot;  type=&quot;text/x-jquery-tmpl&quot; >   ... </li></ul...
jQuery Template Example <ul><li><script id=&quot;MyTemplate&quot;  type=&quot;text/x-jquery-tmpl&quot;> </li></ul><ul><li>...
Applying a Template <ul><ul><li><script id=&quot;MyTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;> </li></ul></ul><ul>...
Adding Conditional Logic <ul><ul><ul><li>{{if MainItems == null }} </li></ul></ul></ul><ul><ul><ul><li><tr> </li></ul></ul...
Working with Loops <ul><ul><li>{{if MainItems == null }} </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>No...
$index and $value Keywords <ul><ul><li>{{each MainItems}} </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td> ...
Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in...
 
Contact Info <ul><li>Blog </li></ul><ul><li>http://weblogs.asp.net/dwahlin </li></ul><ul><li>Twitter </li></ul><ul><li>@Da...
Upcoming SlideShare
Loading in...5
×

Using jQuery Templates

1,960

Published on

This presentation by Dan Wahlin covers the fundamentals needed to get started using jQuery Templates. By using templates you can significantly reduce the amount of JavaScript that you write and keep your code-base more maintainable.

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

  • Be the first to like this

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

No notes for slide
  • Show John Resig&apos;s Micro-Template MIX 09 08/13/11 © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Show John Resig&apos;s Micro-Template MIX 09 08/13/11 © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Tech Ed North America 2010 08/13/11 19:49 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Tech Ed North America 2010 08/13/11 19:49 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Tech Ed North America 2010 08/13/11 19:49 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Tech Ed North America 2010 08/13/11 19:49 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Tech Ed North America 2010 08/13/11 19:49 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  • Transcript of "Using jQuery Templates"

    1. 1. jQuery Templates And HTML5 Dan Wahlin
    2. 2. Contact Info <ul><li>Blog </li></ul><ul><li>http://weblogs.asp.net/dwahlin </li></ul><ul><li>Twitter </li></ul><ul><li>@DanWahlin </li></ul><ul><li>Email: </li></ul><ul><li>[email_address] </li></ul>
    3. 3. Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in Action </li></ul>
    4. 4. Client-Side Template Solutions <ul><li>HTML templates simplify building AJAX applications: </li></ul><ul><ul><li>Minimize custom JavaScript </li></ul></ul><ul><ul><li>Simplify Maintenance </li></ul></ul><ul><li>Several HTML template solutions exist: </li></ul><ul><ul><li>John Resig's JavaScript Micro-Templating </li></ul></ul><ul><ul><li>jBind </li></ul></ul><ul><ul><li>Chain.js </li></ul></ul><ul><ul><li>jQuery Templates </li></ul></ul>
    5. 5. Maintainable Code? <ul><li>var total; </li></ul><ul><li>$(order.Items).each(function() </li></ul><ul><li>{ </li></ul><ul><li>var item = this; </li></ul><ul><li>$('#item' + item.ID) .append('<div>' + item.Title + '</div>'); </li></ul><ul><li>total += item.Total; </li></ul><ul><li>}); </li></ul><ul><li>$('#total').html(total); </li></ul>
    6. 6. Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in Action </li></ul>
    7. 7. jQuery Template Tokens rev 1.0/0510 Chapter 5- {{if}}..{{/if}} {{each}}..{{/each}} ${ Property } {{tmpl}} {{wrap}} {{html}}
    8. 8. jQuery Template Container <ul><li><script id=&quot;MyTemplate&quot; type=&quot;text/x-jquery-tmpl&quot; > ... </li></ul><ul><li></script> </li></ul>
    9. 9. jQuery Template Example <ul><li><script id=&quot;MyTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;> </li></ul><ul><li><div id=&quot;DeliveryDiv&quot;> ${ DeliveryName } </div> </li></ul><ul><li></script> </li></ul>
    10. 10. Applying a Template <ul><ul><li><script id=&quot;MyTemplate&quot; type=&quot;text/x-jquery-tmpl&quot;> </li></ul></ul><ul><ul><li><div id=&quot;DeliveryDiv&quot;> ${ DeliveryName} </div> </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li><div id=&quot;OutputDiv&quot;></div> </li></ul></ul><ul><ul><li>$('#MyTemplate') .tmpl(json) .appendTo('#OutputDiv'); </li></ul></ul>
    11. 11. Adding Conditional Logic <ul><ul><ul><li>{{if MainItems == null }} </li></ul></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><li><td>No items selected</td> </li></ul></ul></ul><ul><ul><ul><li></tr> </li></ul></ul></ul><ul><ul><ul><li>{{else}} </li></ul></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><li><td>${product.Name}</td> </li></ul></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li>{{/if}} </li></ul></ul>
    12. 12. Working with Loops <ul><ul><li>{{if MainItems == null }} </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>No items selected</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li>{{else}} </li></ul></ul><ul><ul><li>{{each(i,mmi) MainItems}} </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td>${mmi.Name}</td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li>{{/each}} </li></ul></ul><ul><ul><li>{{/if}} </li></ul></ul>
    13. 13. $index and $value Keywords <ul><ul><li>{{each MainItems}} </li></ul></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><li><td> </li></ul></ul><ul><ul><li>${$index}: ${$value.Name} </td> </li></ul></ul><ul><ul><li></tr> </li></ul></ul><ul><ul><li>{{/each}} </li></ul></ul>
    14. 14. Agenda <ul><li>Why use Templates? </li></ul><ul><li>Introduction to jQuery Templates </li></ul><ul><li>jQuery Templates in Action </li></ul>
    15. 16. Contact Info <ul><li>Blog </li></ul><ul><li>http://weblogs.asp.net/dwahlin </li></ul><ul><li>Twitter </li></ul><ul><li>@DanWahlin </li></ul><ul><li>Email: </li></ul><ul><li>[email_address] </li></ul>

    ×