Wednesday, December 11, 2013

Quick Tip: Using the Mustache Template Library
videos
\Rating:

Quick Tip: Using the Mustache Template Library

Tutorial Details
  • Topic: Mustache Template Library
  • Format: 5 minute screencast
  • Difficulty: Beginner
Download Source Files
Not long ago, I demonstrated how to use the Mustache, which is just as easy to use.


View Screencast

Step 1: Download Mustache

You can get Mustache.js from its GitHub project page; if you’re going to use it in a project, you can download it or git clone it; I’ve just referenced the raw file on GitHub for this quick tip:
  1. <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>  
Now you can use it to render data!

Step 2: Get Your Data

Most likely, you’ll be getting your data from the server in the form of JSON when you’re using Mustache in production. However, it’s just as easy to hard-code an object literal and use that, which is what we’ll do here.
  1. var data = {  
  2.     name : "Some Tuts+ Sites",  
  3.     sites: ["Nettuts+""Psdtuts+""Mobiletuts+"],  
  4.     url : function () {  
  5.         return function (text, render) {  
  6.             text = render(text);  
  7.             var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';  
  8.             return ' + url + '">' + text + '
';  
  •         }  
  •     }  
  • };  
  • Now we’re ready to define the template.

    Step 3: Create your Template

    Your template is simply string; you can either use a regular old JavaScript string, or you can put the template in a script tag and get it via something like jQuery’s html() method (or, of course, innerHTML). This is probably a better choice if you’re using a complicated template, because you can use line breaks. Just remember to give the script a type of something other than “text/javascript”; otherwise, browsers may try to interpret it, and that will cause errors.
    Your template will be mainly HTML; when you want to use a value from your data, reference the key name of the value in the data. To use the name value in the data above, you’d reference it like this:
    1. <h1> {{name}} </h1>  
    Blocks are an important piece of Mustache: you can use them to get inside arrays and objects, as well as for lambdas (functions). It’s pretty simple to do blocks: just use an opening and closing tag: the opening one starts with a pound (#) and the closing one with a slash(/).
    1. <ul>  
    2.     {{#sites}}  
    3.   
    4.         <li> {{.}} </li>  
    5.   
    6.     {{/sites}}  
    7. </ul>  
    When iterating over arrays, the implicit operator ”.” will get you the value. If sites was an object, you’d use it’s keys inside the block.
    Using functions is a little more tricky. For the data part, Mustache.js requires a function that returns the function to be used. That function gets passed the text to be rendered (all the text within the mustache function tags) and a function that will render the template tags inside the text. Then, whatever that function returns will be put within the tags. You can see this at work in the urls function in the data above.

    Step 4: Render the HTML

    It’s really simple to render the HTML:
    1. html = Mustache.to_html(template, data);  
    Then, you can stick that HTML wherever you want.

    The Complete Source

    1. var data, template, html;  
    2.   
    3. data = {  
    4.     name : "Some Tuts+ Sites",  
    5.     sites: ["Nettuts+""Psdtuts+""Mobiletuts+"],  
    6.     url : function () {  
    7.         return function (text, render) {  
    8.             text = render(text);  
    9.             var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';  
    10.             return ' + url + '">' + text + '
    ';  
  •         }  
  •     }  
  • };  
  •   
  • template = "

     {{name}} 

     
       {{#sites}} 
    •  {{#url}} {{.}} {{/url}} 
    •  {{/sites}}  
    "
    ;  
  •   
  • html = Mustache.to_html(template, data);  
  •   
  • document.write(html)  

  • Conclusion

    To learn more about Mustache, check out the website. Have fun with it!

    5 comments:

    oakleyses said...

    louis vuitton handbags, oakley sunglasses, louboutin, longchamp outlet, nike shoes, louis vuitton outlet stores, chanel handbags, burberry outlet, prada outlet, jordan shoes, tiffany and co, michael kors outlet, tory burch outlet, louis vuitton outlet, longchamp handbags, nike free, true religion jeans, michael kors outlet, kate spade outlet, polo ralph lauren outlet, tiffany and co, prada handbags, polo ralph lauren outlet, michael kors outlet, michael kors outlet, longchamp handbags, oakley sunglasses, ray ban sunglasses, kate spade handbags, burberry outlet, louis vuitton outlet, louboutin outlet, louboutin, coach factory outlet, air max, air max, coach outlet, gucci outlet, christian louboutin shoes, michael kors outlet, coach purses, ray ban sunglasses, michael kors outlet, louis vuitton, coach outlet store online, true religion jeans, oakley sunglasses cheap

    oakleyses said...

    ralph lauren, lululemon, air max, hollister, north face, nike air max, polo lacoste, vanessa bruno, timberland, vans pas cher, louboutin, louis vuitton, oakley pas cher, air max pas cher, nike roshe run, air max, true religion outlet, barbour, sac longchamp, air force, hollister, sac louis vuitton, nike free, polo ralph lauren, nike trainers, louis vuitton uk, nike roshe, sac hermes, longchamp, michael kors, sac burberry, sac guess, mulberry, new balance pas cher, converse pas cher, sac louis vuitton, hogan outlet, nike tn, north face, true religion outlet, ray ban pas cher, michael kors, air jordan, nike blazer, nike free pas cher, michael kors pas cher, abercrombie and fitch, ray ban sunglasses

    oakleyses said...

    mac cosmetics, mont blanc, marc jacobs, canada goose outlet, nike huarache, vans shoes, soccer jerseys, hollister, giuseppe zanotti, beats by dre, abercrombie and fitch, longchamp, insanity workout, celine handbags, bottega veneta, ghd, nfl jerseys, north face outlet, chi flat iron, ugg boots, birkin bag, ugg australia, canada goose, herve leger, ugg pas cher, rolex watches, valentino shoes, canada goose uk, canada goose, ferragamo shoes, canada goose, ugg boots, uggs outlet, north face jackets, soccer shoes, asics running shoes, new balance shoes, p90x, lululemon outlet, canada goose jackets, mcm handbags, instyler, babyliss pro, ugg, wedding dresses, jimmy choo outlet, reebok outlet, nike roshe run

    oakleyses said...

    parajumpers, karen millen, air max, converse, pandora charms, moncler, louboutin, moncler, links of london, lancel, juicy couture outlet, oakley, hollister, pandora charms, supra shoes, thomas sabo, canada goose, gucci, wedding dresses, timberland boots, swarovski crystal, air max, coach outlet store online, moncler, ray ban, canada goose, moncler, ugg, louis vuitton, swarovski, hollister, montre homme, moncler, hollister clothing store, ralph lauren, rolex watches, moncler outlet, moncler, iphone 6 cases, baseball bats, juicy couture outlet, toms shoes, vans, pandora jewelry, ugg, converse shoes

    oakleyses said...

    parajumpers, karen millen, air max, converse, pandora charms, moncler, louboutin, moncler, links of london, lancel, juicy couture outlet, oakley, hollister, pandora charms, supra shoes, thomas sabo, canada goose, gucci, wedding dresses, timberland boots, swarovski crystal, air max, coach outlet store online, moncler, ray ban, canada goose, moncler, ugg, louis vuitton, swarovski, hollister, montre homme, moncler, hollister clothing store, ralph lauren, rolex watches, moncler outlet, moncler, iphone 6 cases, baseball bats, juicy couture outlet, toms shoes, vans, pandora jewelry, ugg, converse shoes