Downloaded 58 times
![Tag text: p some text! vars: - varfoo = ‘bar’iteration: for (var key in obj) p= obj[key]Chain:Comments:// comment >> <!-– comment -->//- comment >> will not outputBlock Comments:// #content](https://image.slidesharecdn.com/jstemplating-110815205941-phpapp02/75/Jade-Javascript-templating-15-2048.jpg)
![RunningServer Side:Cli:$ jade file.jade # compile jade template to file.htmlIn node:varfn =jade.compile('string of jade', options);Client Side:Jade runtime client-side (jade.js)Compile to pure js functions :function anonymous(locals, attrs, escape, rethrow) { varbuf = []; with (locals || {}) { varinterp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); }](https://image.slidesharecdn.com/jstemplating-110815205941-phpapp02/75/Jade-Javascript-templating-17-2048.jpg)
Jade & Javascript templating
- 1.
- 2. Wat?Web Template Engine- Pull in content and combine with layout & structure template to produce native web outputi.e.: pull content out of a DB, process along with template to produce pure HTML outputGrails gsp:<ul><g:each in="${items}" var="item"> <li>${item}</li> </g:each> </ul>------------------------------------------------------------------------------------------------------<ul> <li>Grails</li> <li>Groovy</li></ul>
- 3. Why?Obvious one –support dynamic content Provides if-then-else logic, iterationSeparation of Concern - separate presentation from content Modularized – break out header, footer, etc
- 4. JS - Clientor Server?JS has client-side templating most notably jquery and underscoreWith the advent of node you get support for (more traditional?) server-side templatingWe chose to go with client-side, to support our efforts using Spine.js, and since we are just using websocketsInteresting argument from hij1nx of nodejitsuhttp://blog.nodejitsu.com/micro-templates-are-dead
- 5.
- 6. ERB<div id="profile"> <divclass="left column"> <div id="date"> <%= print_date%> </div> <div id="address"> <%= current_user.address%> </div></div> <div class="right column"> <div id="email"> <%= current_user.email%> </div> <div id="bio"> <%= current_user.bio %> </div></div> </div>
- 7. {{mustache}} in Ruby <divclass="row"> {{#projects}} <a href="{{url}}" class="block"> <h2> {{name}} </h2> <p> {{description}} </p> </a> {{/projects}} </div>
- 8. JQuery Template{{if data.length}} <ul> {{each data}} <li> <a href="#/category/${$value._id}"> ${$value.name} </a></li>{{/each}}</ul>
- 9. HAML#profile .left.column #date= print_date #address=current_user.address.right.column #email= current_user.email #bio= current_user.bio
- 11. !!! 5 html(lang="en")head title= pageTitle script(type='text/javascript') if (foo) { bar() } body h1 Jade - node template engine #container - if (youAreUsingJade) p You are amazing - else p Get on it!
- 12. <!DOCTYPE html> <htmllang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar() } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> </html>
- 13. Jade:HTML::Coffeescript:JavascriptHeavily influenced byHAMLMade by https://github.com/visionmedia (core committer on express)Written in JavaScript for nodeCan be used client side
- 14. A tag isjust a word: htmlHash for id’s: div#mydivClasses: div.myclassChain:div#foo.class1.class2Div sugar:#foo.bar
- 15. Tag text: psome text! vars: - varfoo = ‘bar’iteration: for (var key in obj) p= obj[key]Chain:Comments:// comment >> <!-– comment -->//- comment >> will not outputBlock Comments:// #content
- 16. Stylusbody { font:12px Helvetica, Arial, sans-serif; }a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }---------------------------------------------------body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
- 17. RunningServer Side:Cli:$ jadefile.jade # compile jade template to file.htmlIn node:varfn =jade.compile('string of jade', options);Client Side:Jade runtime client-side (jade.js)Compile to pure js functions :function anonymous(locals, attrs, escape, rethrow) { varbuf = []; with (locals || {}) { varinterp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); }