Microsoft and jQuery

Microsoft and jQuery

• 1.
  Microsoft與jQuery社群的親密接觸上官林傑 (ericsk)@ OSDC.tw2011
• 2.
  About myself上官林傑 a.k.a.ericskExperiencesDeveloper Evangelist @ Microsoft Taiwan2011.03 ~ Organizer @ Taipei GTUG2009.08 ~ 2010.12Military Service @ CHT2007.01 ~ 2011.02http://plurk.com/ericskhttp://facebook.com/ericsk0313
• 3.
  OutlinesWhat’s jQuery?jQueryIntegration inMicrosoft ProductsMicrosoft’s Contributions to jQuery
• 4.
  What’s jQuery?http://jquery.comhttps://github.com/jqueryLightweight, powerful,cross-browser JavaScript libraryFull CSS3 Selector SupportEasy and useful DOM, Event, AJAX APIsActive communities, includes UI, tool, plugins, etc.
• 5.
  jQuery Sample[DOM Manipulation]<divid="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 MSProductsStarts from Visual Studio® 2008 SP1jQuery code intellisenseMicrosoft CDN also supports intellisense (VS2010)http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js
• 7.
  jQuery Control forASP.NETImplements ASP.NET toolkits with jQueryAJAX Control ToolkitClient Templates…
• 8.
  Community EngagementCreated proposalsto jQuery developer forumtemplate、globalization、datalinkjQuery accepted them as official plugins:http://github.com/jquery/jquery-tmplhttp://github.com/jquery/jquery-globalhttp://github.com/jquery/jquery-datalink
• 9.
  jQuery TemplateProject: https://github.com/jquery/jquery-tmplDocument:http://api.jquery.com/category/plugins/templates/CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.jsRender template with Array or Object.Simple template syntax
• 10.
  Templates3 ways toprepare 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}}OutputHTML 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<scriptsrc="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<scriptid="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(/\n/g, '<br>'); } }) .appendTo($('#message-list')); });</script>
• 14.
  jQueryDatalinkProject: https://github.com/jquery/jquery-datalinkDocument: http://api.jquery.com/category/plugins/data-link/Linkfields from one object to another automatically.
• 15.
  jQueryDatalink Sample<script src="jquery-1.5.1.min.js"></script><scriptsrc="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.
  jQueryGlobalzationProject: https://github.com/jquery/jquery-globalUsed tomake page i18n.$.global.cultures defines “culture” of each locale, such as number format, calendar format, etc.Set $.global.culture to switch localeLocalize words (tokens)
• 17.
  [Global] Date Format//2011/03/25vardateStrEn = $.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.
  JSDeferhttps://github.com/BorisMoore/JsDeferDeferred script loader$.defer('/path/to/js') .done(function() { // DO something }) .fail(function() { // DO something when fail });
• 20.
  FutureWatch Boris Moore’srepositories:https://github.com/BorisMoore
• 21.
  AdsTry Visual WebDeveloper® Express FREEhttp://www.microsoft.com/express/Web/BizSpark / DreamSpark for Startups!http://www.microsoft.com/taiwan/bizspark/http://www.microsoft.com/taiwan/dreamspark/