O'Reilly logo

Meteor: Full-Stack Web Application Development by Marcelo Reyna, Isaac Strack, Fabian Vogelsteller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Jade for Meteor

Jade works much like CoffeeScript but it is used for HTML instead. I recommend that you install the mquandalle:jade package. All the Jade files are saved with a .jade extension. This section will cover the most used aspects of Jade in Meteor such as HTML tags, components, and helpers.

HTML tags

Much like CoffeeScript, Jade is a language that depends heavily on tabbing. When you want to add children to an HTML tag, you simply use tab. Tag IDs and classes can be added using the CSS selector notation ('input#name.first'). This means classes are expressed with a dot (.) and IDs are expressed with a pound (#). Let's look at an example:

//- JADE
div#container
  ul.list
    li(data-bind="clickable") Click me!

<!-- HTML – OUTPUT --> <div id="container"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required