$.Template
Upcoming SlideShare
Loading in...5
×
 

$.Template

on

  • 2,678 views

 

Statistics

Views

Total Views
2,678
Views on SlideShare
2,657
Embed Views
21

Actions

Likes
2
Downloads
32
Comments
0

3 Embeds 21

http://www.slideshare.net 16
http://www.linkedin.com 4
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

$.Template $.Template Presentation Transcript

  • $.template
  • Why use a template? • Render data as markup • Separation of display logic from business logic • Reusable markup (in theory) • Maybe it’s cleaner? • It’s definitely faster than...
  • The Other Options • String Concatenation • Array.join • DOM Manipulation • jQuery.append
  • String Concatenation var str = ''; str += '<p>Hello, <em>'; str += this.name; str += '</em>!</p>'; body.innerHTML = str;
  • Array.join var arr = []; arr.push('<p>Hello, <em>'); arr.push(this.name); arr.push('</em>!</p>'); body.innerHTML = arr.join('');
  • DOM Manipulation var p = document.createElement('P'); var hello = document.createTextNode('Hello, '); var em = document.createElement('EM'); var world = document.createTextNode(this.name + '!'); em.appendChild(world); p.appendChild(hello); p.appendChild(world); body.appendChild(p);
  • jQuery.append $('<p>').append( 'Hello, ', $('<em>').text(this.name + '!') ).appendTo('body');
  • JavaScript Templating Libraries • mustache.js • HandlebarJS • TrimPath JST • Resig Micro-Templating • jQuery.template
  • $.template • jQuery plugin • Modified Resig Micro- Templating • Allows inline JavaScript • Caching • Ajax • Faster
  • $.template Basics • Converts a string into a function • Caches the rendered function • Function renders data as DOM/ HTML
  • Writing a template
  • Scope (this) • Rendered template function is executed in the scope of the data object • Dropped with for performance, replaced with this var str = '<p>Hello, <em>{%= this.name %}!</em></p>';
  • Two Types of Tags • Output tags pass their values to the returned output • Functional tags execute arbitrary JavaScript, but do not output any value
  • Output Tags {%= ... %} // Output is added to the output {%= this.property %} // Ternaries can be used for quick conditionals {%= this.property ? this.property : "N/A" %} // JavaScript is executed and added to output {%= (new Date()).getTime() - (this.birthdate).getTime() %}
  • Functional Tags {% ... %} // Value is not added to output {% var pie = 22/7; } // Semi-colons not required, but encouraged for best practice {% var greeting = "Hello, " + this.name } // WIN // Double-quotes are STRICTLY REQUIRED {% var greeting = 'Hello, ' + this.name } // FAIL // Single-quotes allowed in strings {% var greeting = "I'm with " + this.name } // WIN
  • Looping an Array {% for (var i = 0, n = this.images.length; i < n; ++i) { %} {% var img = this.images[i]; } <img src="{%= img.src %}" alt="{%= img.description %}"> {% } %}
  • Conditionals {% if (this.age > 21) { %} <a href="booze.html">Drink up!</a> {% } else { %} <a href="music.html">Enjoy some tunes!</a> {% } %}
  • Subtemplates <h1>{%= this.name %}</h1> {% function renderJob (job) { %} {% var verb = (job.end === "present") ? "work" : "worked"; %} I {%= verb %} at <strong>{%= job.company %}</strong> as a <em>{%= job.position %}</em> {% } %} <ul> {% for (var i = 0, n = this.jobs.length; i < n; ++i) { %} <li>{% renderJob(this.jobs[i]) %}</li> {% } %} </ul>
  • Subtemplates <h1>{%= this.name %}</h1> {% function renderJob (job) { %} {% var verb = (job.end === "present") ? "work" : "worked"; %} I {%= verb %} at <strong>{%= job.company %}</strong> as a <em>{%= job.position %}</em> {% renderDate(job.start, job.end) %} {% function renderDate (start, end) { %} from {%= start %} {%= end === "present" ? "" : "to " + end %}. {% } %} {% } %} <ul> {% for (var i = 0, n = this.jobs.length; i < n; ++i) { %} <li>{% renderJob(this.jobs[i]) %}</li> {% } %} </ul>
  • template + data = output
  • Template Input • string • var • $.ajax (asynchronous) • DOM (via $.fn.template) • Ajax (synchronous)
  • Template Input (string) var str = '<p>Hello, <em>{%= this.name %}!</em></p>'; var data = { name: 'world' }; var func = $.template(str); // anonymous() var elem = $.template(str, data); // [jquery:template] var html = $.template(str, data, true); // <p>Hello, <em>world!</em></p>
  • Template Input (DOM) <script id="tpl" type="text/html"> Hello, {%= this.name %}! </script> var data = { name: 'world' }; var func = $('#tpl').template(); // anonymous() var elem = $('#tpl').template(data); // [jquery:template] var html = $('#tpl').template(data, true); // <p>Hello, <em>world!</em></p>
  • Template Input (Ajax) var url = 'hello.tpl'; var data = { name: 'world' }; var func = $.template(url); // anonymous() var elem = $.template(url, data); // [jquery:template] var html = $.template(url, data, true); // <p>Hello, <em>world!</em></p>
  • Data Input • Object • Array (of objects)
  • Data Input (Object) var str = '<p>Hello, <em>{%= this.name %}!</em></p>'; var data = { name: 'world' }; var html = $.template(str, data, true); // <p>Hello, <em>world!</em></p>
  • Data Input (Array of objects) var str = '<p>Hello, <em>{%= this.name %}!</em></p>'; var data = [ { name: 'world' }, { name: 'Dolly' }, { name: 'mom' } ]; var html = $.template(str, data, true); // <p>Hello, <em>world!</em></p> // <p>Hello, <em>Dolly!</em></p> // <p>Hello, <em>mom!</em></p>
  • Output • function • DOM (as a jQuery instance) • HTML (as a string)
  • Output (function) // This template... var str = '<p>Hello, <em>{%= this.name %}</em>!</p>'; var func = $.template(str); // becomes... function anonymous() { var __ = []; __.push("<p>Hello, <em>", this.name, "!</em></p>"); return __.join(""); } // which can be used as... var elem = func(data); // or... var html = func(data, true);
  • Output (function) <p>Hello, <em> {% if (this.name) { %} {%= this.name %} {% } else { %} stranger {% } %} !</em></p> function anonymous() { var __ = []; __.push("<p>Hello, <em>"); if (this.name) { __.push("", this.name, ""); } else { __.push("stranger"); } __.push("!</em></p>"); return __.join(""); }
  • Output (DOM) DOM output is wrapped in <jquery:template/> to allow jQuery manipulation and to protect leading and trailing fragments and elements <jquery:template> <p>Hello, <em>world!</em></p> <p>Hello, <em>Dolly!</em></p> <p>Hello, <em>mom!</em></p> </jquery:template> Hello, <em>world!</em> // FAIL <em>world!</em> <em>Goodbye</em>, cruel world! // FAIL <em>Goodbye</em>
  • Output (DOM) Attempted a patch to jQuery to wrap leading and trailing fragments as text nodes, but then var elem = $(tpl, obj).appendTo('body').hide(); // FAIL would require rewrite of all of jQuery's DOM functions :(
  • Output (DOM) Still breaks in some instances where markup is too invalid $.template('<tr><td>{%= this.name %}</td></tr>', data) .appendTo('<table/>'); <jquery:template> <tr> <td>Hello, world!</td> <td>Hello, Dolly!</td> <td>Hello, mom!</td> </tr> </jquery:template> <table/> // FAIL // Invalid markup squirts out of the target element
  • Output (HTML) Fix: use true to render as HTML var html = $.template('<tr><td>{%= this.name %}</td></tr>', data, true); // <tr> // <td>Hello, world!</td> // <td>Hello, Dolly!</td> // <td>Hello, mom!</td> // </tr> $('<table/>').append(html);
  • Known Issues • Does not properly extract DOM text in IE (fix on the way) • Breaks in some cases where markup is invalid
  • Thanks! • http://github.com/furf/jquery-template