SlideShare une entreprise Scribd logo
1  sur  21
Microsoft與jQuery社群的親密接觸 上官林傑 (ericsk) @ OSDC.tw 2011
About myself 上官林傑 a.k.a. ericsk Experiences Developer Evangelist @ Microsoft Taiwan2011.03 ~  Organizer @ Taipei GTUG2009.08 ~ 2010.12 Military Service @ CHT2007.01 ~ 2011.02 http://plurk.com/ericskhttp://facebook.com/ericsk0313
Outlines What’s jQuery? jQueryIntegration in Microsoft Products Microsoft’s Contributions to jQuery
What’s jQuery? http://jquery.comhttps://github.com/jquery Lightweight, powerful, cross-browser JavaScript library Full CSS3 Selector Support Easy and useful DOM, Event, AJAX APIs Active communities, includes UI, tool, plugins, etc.
jQuery Sample [DOM Manipulation] <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script>  $('<h1>Hello, world</h1>')      .css({color: 'red', display: 'none'})      .appendTo($('#foo'))      .show('slow'); </script> [Event, AJAX] <button id="btn">Click</button> <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('#btn').click(function(e){     $.getJSON('/path/to/json', function(data) {         // do something with data     }); }); </script>
Integrates with MS Products Starts from Visual Studio® 2008 SP1 jQuery code intellisense Microsoft CDN also supports intellisense (VS2010) http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js
jQuery Control for ASP.NET Implements ASP.NET toolkits with jQuery AJAX Control Toolkit Client Templates …
Community Engagement Created proposals to jQuery developer forum template、globalization、datalink jQuery accepted them as official plugins: http://github.com/jquery/jquery-tmpl http://github.com/jquery/jquery-global http://github.com/jquery/jquery-datalink
jQuery Template Project: https://github.com/jquery/jquery-tmpl Document: http://api.jquery.com/category/plugins/templates/ CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js Render template with Array or Object. Simple template syntax
Templates 3 ways to prepare the template: $('<div>${foo}</div><div>${bar}</div>').tmpl(data) <script id="my-tmpl" type="text/x-jquery-tmpl"><div>${foo}</div><div>${bar}</div></script><script>  $('#my-tmpl').tmpl(data)...</script> <div id="my-tmpl" style="display:none">${foo} says ${bar}.</div><script>$('#my-tmpl').tmpl(data)...</script>
Template Syntax ${variableOrExpression} {{html variableOrExpression}} Output HTML content {{if}} {{else}} {{/if}} Conditional tags. (else could be used as `else if`) {{each data}} ${$index} ${$value} {{/each}} Iterate over an array or object {{tmpl template}} ... {{/tmpl}} Composite templates {{wrap template}} ... {{/wrap}} Wrap with another template
jQuery Template Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.tmpl.min.js"></script> <script id="message-tmpl" type="text/x-jquery-tmpl">     <li class="message-item">         <h4 class="message-name">${UserId}</h4>         <div class="message-content">${Comment}</div>         <div class="message-time">${PostTime}</div>     </li> </script> ... <script>   $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp)          .appendTo($('#message-list'));   }); </script>
jQuery Template Sample <script id="message-tmpl" type="text/x-jquery-tmpl">     <li class="message-item">         <h4 class="message-name">${UserId}</h4>         <div class="message-content"> {{html $item.NL2BRComment()}        </div>         <div class="message-time">${PostTime}</div>     </li> </script> ... <script>   $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp, {            NL2BRComment: function() {               return this.data.Comment.replace(//g, '<br>');             }          })          .appendTo($('#message-list'));   }); </script>
jQueryDatalink Project: https://github.com/jquery/jquery-datalink Document: http://api.jquery.com/category/plugins/data-link/ Link fields from one object to another automatically.
jQueryDatalink Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.datalink.js"></script> <form>   <input type="text" name="userid">  <input type="text" name="text"> </form> <script> var foo = {}; $('form').link(foo); $('input[name=userid]').val('ericsk'); alert(foo.userid); // ericsk $(foo).setField('text', 'kscire'); $('input[name=text]').val(); // kscire </script>
jQueryGlobalzation Project: https://github.com/jquery/jquery-global Used to make page i18n. $.global.cultures defines “culture” of each locale, such as number format, calendar format, etc. Set $.global.culture to switch locale Localize words (tokens)
[Global] Date Format // 2011/03/25 vardateStrEn = $.global.format(     new Date(2011, 3, 25),    'yyyy/MM/dd' ); // 2011年3月25日 var $zhTW = $.global.cultures['zh-TW']; vardateStrZhTW = $.global.format(     new Date(2011, 3, 25),     $zhTW.calendars.standard.patterns.D,    $zhTW );
[Global] Localize Words $.global.localize('trans', 'zh-TW', {   'Hello': '哈囉', 'world': '世界' }); $.global.localize('trans', 'ja', { 'Hello': 'こんにちは', 'world': '世界' }); vartz = $.global.localize('trans', 'zh-TW'); alert(tz.Hello + ', ' + tz.world); // 哈囉, 世界 vartj = $.global.localize('trans', 'ja'); alert(tz.Hello + ', '+ tz.world); //こんにちは, 世界
JSDefer https://github.com/BorisMoore/JsDefer Deferred script loader $.defer('/path/to/js')    .done(function() {         // DO something    })    .fail(function() {         // DO something when fail     });
Future Watch Boris Moore’s repositories: https://github.com/BorisMoore
Ads Try Visual Web Developer® Express FREE http://www.microsoft.com/express/Web/ BizSpark / DreamSpark for Startups! http://www.microsoft.com/taiwan/bizspark/ http://www.microsoft.com/taiwan/dreamspark/

Contenu connexe

Tendances

Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 

Tendances (20)

J Query Presentation
J Query PresentationJ Query Presentation
J Query Presentation
 
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
22 j query1
22 j query122 j query1
22 j query1
 
JS basics
JS basicsJS basics
JS basics
 
Web Component
Web ComponentWeb Component
Web Component
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Web components
Web componentsWeb components
Web components
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Suggest.js
Suggest.jsSuggest.js
Suggest.js
 
Devoxx 2014-webComponents
Devoxx 2014-webComponentsDevoxx 2014-webComponents
Devoxx 2014-webComponents
 
Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework
 
Session 3 Java Script
Session 3 Java ScriptSession 3 Java Script
Session 3 Java Script
 
Java Script
Java ScriptJava Script
Java Script
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
Data binding
Data bindingData binding
Data binding
 
JavaScript APIs In Focus
JavaScript APIs In FocusJavaScript APIs In Focus
JavaScript APIs In Focus
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 

En vedette (6)

An Introduction to GAEO web framework
An Introduction to GAEO web frameworkAn Introduction to GAEO web framework
An Introduction to GAEO web framework
 
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
 
08 06 Petley Round Table
08 06 Petley Round Table08 06 Petley Round Table
08 06 Petley Round Table
 
Intro. to JavaScript
Intro. to JavaScriptIntro. to JavaScript
Intro. to JavaScript
 
Bubbles12whole
Bubbles12wholeBubbles12whole
Bubbles12whole
 
08 06 Xian Saito Talk 2003v
08 06 Xian Saito Talk 2003v08 06 Xian Saito Talk 2003v
08 06 Xian Saito Talk 2003v
 

Similaire à Microsoft and jQuery

[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
Carles Farré
 
Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITP
yucefmerhi
 

Similaire à Microsoft and jQuery (20)

Microsoft and jQuery: A true love story - templating and other contributions
Microsoft and jQuery: A true love story - templating and other contributionsMicrosoft and jQuery: A true love story - templating and other contributions
Microsoft and jQuery: A true love story - templating and other contributions
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
Jsfsunum
JsfsunumJsfsunum
Jsfsunum
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Struts2
Struts2Struts2
Struts2
 
JQuery 101
JQuery 101JQuery 101
JQuery 101
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 
Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITP
 
Html5
Html5Html5
Html5
 
Introducing Struts 2
Introducing Struts 2Introducing Struts 2
Introducing Struts 2
 
Web Scraping with PHP
Web Scraping with PHPWeb Scraping with PHP
Web Scraping with PHP
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery Presentation - Refresh Events
jQuery Presentation - Refresh EventsjQuery Presentation - Refresh Events
jQuery Presentation - Refresh Events
 
Eugene Andruszczenko: jQuery
Eugene Andruszczenko: jQueryEugene Andruszczenko: jQuery
Eugene Andruszczenko: jQuery
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare Instant
 
SlideShare Instant
SlideShare InstantSlideShare Instant
SlideShare Instant
 
HTML5 and web technology update
HTML5 and web technology updateHTML5 and web technology update
HTML5 and web technology update
 

Plus de Eric ShangKuan

透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
Eric ShangKuan
 
Metro Style Apps from C++ Developers' View
Metro Style Apps from C++ Developers' ViewMetro Style Apps from C++ Developers' View
Metro Style Apps from C++ Developers' View
Eric ShangKuan
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
Eric ShangKuan
 

Plus de Eric ShangKuan (13)

運用 Azure Custom Vision 輕鬆開發智慧視覺應用程式
運用 Azure Custom Vision 輕鬆開發智慧視覺應用程式運用 Azure Custom Vision 輕鬆開發智慧視覺應用程式
運用 Azure Custom Vision 輕鬆開發智慧視覺應用程式
 
Introducing .NET Core Open Source
Introducing .NET Core Open SourceIntroducing .NET Core Open Source
Introducing .NET Core Open Source
 
In
InIn
In
 
Azure machine learning overview
Azure machine learning overviewAzure machine learning overview
Azure machine learning overview
 
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
 
Metro Style Apps from C++ Developers' View
Metro Style Apps from C++ Developers' ViewMetro Style Apps from C++ Developers' View
Metro Style Apps from C++ Developers' View
 
Building Python Applications on Windows Azure
Building Python Applications on Windows AzureBuilding Python Applications on Windows Azure
Building Python Applications on Windows Azure
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Intro To Google Maps
Intro To Google MapsIntro To Google Maps
Intro To Google Maps
 
Practical Google App Engine Applications In Py
Practical Google App Engine Applications In PyPractical Google App Engine Applications In Py
Practical Google App Engine Applications In Py
 
Intro. to CSS
Intro. to CSSIntro. to CSS
Intro. to CSS
 
jQuery Tutorial
jQuery TutorialjQuery Tutorial
jQuery Tutorial
 
The Google App Engine Oil Framework
The Google App Engine Oil FrameworkThe Google App Engine Oil Framework
The Google App Engine Oil Framework
 

Dernier

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Dernier (20)

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 

Microsoft and jQuery

  • 2. About myself 上官林傑 a.k.a. ericsk Experiences Developer Evangelist @ Microsoft Taiwan2011.03 ~ Organizer @ Taipei GTUG2009.08 ~ 2010.12 Military Service @ CHT2007.01 ~ 2011.02 http://plurk.com/ericskhttp://facebook.com/ericsk0313
  • 3. Outlines What’s jQuery? jQueryIntegration in Microsoft Products Microsoft’s Contributions to jQuery
  • 4. What’s jQuery? http://jquery.comhttps://github.com/jquery Lightweight, powerful, cross-browser JavaScript library Full CSS3 Selector Support Easy and useful DOM, Event, AJAX APIs Active communities, includes UI, tool, plugins, etc.
  • 5. jQuery Sample [DOM Manipulation] <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('<h1>Hello, world</h1>') .css({color: 'red', display: 'none'}) .appendTo($('#foo')) .show('slow'); </script> [Event, AJAX] <button id="btn">Click</button> <div id="foo"></div> <script src="jquery-1.5.1.min.js"></script> <script> $('#btn').click(function(e){ $.getJSON('/path/to/json', function(data) { // do something with data }); }); </script>
  • 6. Integrates with MS Products Starts from Visual Studio® 2008 SP1 jQuery code intellisense Microsoft CDN also supports intellisense (VS2010) http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js
  • 7. jQuery Control for ASP.NET Implements ASP.NET toolkits with jQuery AJAX Control Toolkit Client Templates …
  • 8. Community Engagement Created proposals to jQuery developer forum template、globalization、datalink jQuery accepted them as official plugins: http://github.com/jquery/jquery-tmpl http://github.com/jquery/jquery-global http://github.com/jquery/jquery-datalink
  • 9. jQuery Template Project: https://github.com/jquery/jquery-tmpl Document: http://api.jquery.com/category/plugins/templates/ CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js Render template with Array or Object. Simple template syntax
  • 10. Templates 3 ways to prepare the template: $('<div>${foo}</div><div>${bar}</div>').tmpl(data) <script id="my-tmpl" type="text/x-jquery-tmpl"><div>${foo}</div><div>${bar}</div></script><script> $('#my-tmpl').tmpl(data)...</script> <div id="my-tmpl" style="display:none">${foo} says ${bar}.</div><script>$('#my-tmpl').tmpl(data)...</script>
  • 11. Template Syntax ${variableOrExpression} {{html variableOrExpression}} Output HTML content {{if}} {{else}} {{/if}} Conditional tags. (else could be used as `else if`) {{each data}} ${$index} ${$value} {{/each}} Iterate over an array or object {{tmpl template}} ... {{/tmpl}} Composite templates {{wrap template}} ... {{/wrap}} Wrap with another template
  • 12. jQuery Template Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.tmpl.min.js"></script> <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content">${Comment}</div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp) .appendTo($('#message-list')); }); </script>
  • 13. jQuery Template Sample <script id="message-tmpl" type="text/x-jquery-tmpl"> <li class="message-item"> <h4 class="message-name">${UserId}</h4> <div class="message-content"> {{html $item.NL2BRComment()} </div> <div class="message-time">${PostTime}</div> </li> </script> ... <script> $.post('/path/to/post', { ... }, function(resp) { $('#message-tmpl').tmpl(resp, { NL2BRComment: function() { return this.data.Comment.replace(//g, '<br>'); } }) .appendTo($('#message-list')); }); </script>
  • 14. jQueryDatalink Project: https://github.com/jquery/jquery-datalink Document: http://api.jquery.com/category/plugins/data-link/ Link fields from one object to another automatically.
  • 15. jQueryDatalink Sample <script src="jquery-1.5.1.min.js"></script> <script src="jquery.datalink.js"></script> <form> <input type="text" name="userid"> <input type="text" name="text"> </form> <script> var foo = {}; $('form').link(foo); $('input[name=userid]').val('ericsk'); alert(foo.userid); // ericsk $(foo).setField('text', 'kscire'); $('input[name=text]').val(); // kscire </script>
  • 16. jQueryGlobalzation Project: https://github.com/jquery/jquery-global Used to make page i18n. $.global.cultures defines “culture” of each locale, such as number format, calendar format, etc. Set $.global.culture to switch locale Localize words (tokens)
  • 17. [Global] Date Format // 2011/03/25 vardateStrEn = $.global.format( new Date(2011, 3, 25), 'yyyy/MM/dd' ); // 2011年3月25日 var $zhTW = $.global.cultures['zh-TW']; vardateStrZhTW = $.global.format( new Date(2011, 3, 25), $zhTW.calendars.standard.patterns.D, $zhTW );
  • 18. [Global] Localize Words $.global.localize('trans', 'zh-TW', { 'Hello': '哈囉', 'world': '世界' }); $.global.localize('trans', 'ja', { 'Hello': 'こんにちは', 'world': '世界' }); vartz = $.global.localize('trans', 'zh-TW'); alert(tz.Hello + ', ' + tz.world); // 哈囉, 世界 vartj = $.global.localize('trans', 'ja'); alert(tz.Hello + ', '+ tz.world); //こんにちは, 世界
  • 19. JSDefer https://github.com/BorisMoore/JsDefer Deferred script loader $.defer('/path/to/js') .done(function() { // DO something }) .fail(function() { // DO something when fail });
  • 20. Future Watch Boris Moore’s repositories: https://github.com/BorisMoore
  • 21. Ads Try Visual Web Developer® Express FREE http://www.microsoft.com/express/Web/ BizSpark / DreamSpark for Startups! http://www.microsoft.com/taiwan/bizspark/ http://www.microsoft.com/taiwan/dreamspark/