JS template engine Jade Use syntax

Source: Internet
Author: User

Jade is a high-performance, easy-to-understand template engine, and Jade is a haml JavaScript implementation, supported on both the server side (NodeJS) and the client.

Function

· Client Support

· Ultra-strong readability

· Flexible and easy-to-use indentation

· Block extension

· Code is encoded by default for enhanced security

· Compile and run-time context error Reporting

· Command-line compilation support

· HTML5 Mode (Use!!! 5 Document Type)

· Optional Memory cache

· Federated dynamic and static tag classes

· Processing of parse tree using filter

· Support Express JS

· Use each transparent loop objects,arrays even non-enumerable objects

· Block annotations

· No tag prefixes required

· AST Filter

· Filter filters

O:sass need to install sass.js

O:less need to install less.js

O:markdown need to install Markdown-js or node-discount

O:cdata

O:coffeescript need to install Coffee-script

· Vim Grammar file

· TextMate Bag

· screencasts

Other language implementations

· PHP

· Scala

· Ruby

Installation

Via NPM:

NPM Install Jade

Browser support

You can compile jade as a client browser-compatible file by using the following command:

$ make Jade.js

Alternatively, if you have installed Uglifyjs (NPMINSTALLUGLIFY-JS) with NPM, you can create two files simultaneously by using the following command:

$ make Jade.min.js

Exposing APIs

var jade = require (' Jade ');

Render string

Jade.render ('. csser.com string ', {options: ' here '});

Render file

Jade.renderfile (' Path/to/csser.com.jade ', {options: ' here '}, function (err, HTML) {

The options here are optional.

The callback function can be used as a second argument

});

Compiling a function

var fn = jade.compile (' String of Jade ', options);

Fn.call (scope, locals);

Options

·  Scope Execution scope (this)

·  locals local variable Object

·  filename handles exceptions and caches when used

·  Cache is cached in memory by file name JavaScript

·  The markup and function body generated by the debug output

·  compiler replacing the jade default compilation engine

Grammar

End of Line

CRLF and CR are converted to LF before parsing.

Mark

The tag is the first word in a row:

Html

will be converted to

Tags can also have IDs:

Div#container

This will be rendered as <div id= "container" ></div>

How do I handle classes?

Div.user-details

Render as: <div class= "User-details" ></div>

Multiple class? And there's an ID?

Div#foo.bar.baz

Render as: <div id= "foo" class= "bar Baz" ></div>

The total write div is really annoying and can be omitted:

#foo

. Bar

Output: <div id= "foo" ></div><div class= "Bar" ></div>

Tag text

Just place the text content behind the tag:

P Wahoo!

Render as <p>wahoo!</p>.

Cool, but how do you deal with large pieces of text?

P

| Foo Bar Baz

| rawr rawr

| Super Cool

| Go Jade Go

Rendered as <p>foo bar Baz rawr.....</p>

Interpolation method? Yes, both types of text can be interpolated, if we pass in {locals: {name: ' One back ', email: ' xianlihua[at]gmail.com '}, you can do this:

#user #{name} <#{email}>

Output: <div id= "User" > One back <xianlihua[at]gmail.com></div>

Need to output #{} for some reason? Escaped:

P \#{csser, focus on javascript technology}

This is achieved by: <p>#{csser, attention to JavaScript technology}</p>

You can also use the invert semantics variable! {html}, the following code will output the script tag:

-var html = "<script></script>"

| ! {html}

Nested tags that contain text can also use text blocks:

Label

| Username:

Input (name= ' user[name] ')

or use tag text directly:

Label Username:

Input (name= ' user[name] ')

Accept only plain text tokens, such as Script,style, and textarea do not need to start with the | character, for example:

Html

Head

Title Csser, focus on web front-end technology

Script

if (foo) {

Bar ();

} else {

Baz ();

}

Again as an alternative, we can use the dot '. ' To represent a block of text, for example:

P.

Foo ASDF

Asdf

Asdfasdfaf

Asdf

Asd.

Output:

<p>foo ASDF

Asdf

Asdfasdfaf

Asdf

Asd

.

</p>

If the dot number '. ' There is a space between the tag, and Jade parses it and ignores it as text processing:

P.

Output:

<p>.</p>

Comments

A single-line comment currently appears to be consistent with JavaScript, i.e. "//" and the contents of a single-line comment must be on the same line:

Some paragraphs

P Foo

P Bar

The output will be:

<!--some paragraphs--

<p>foo</p>

<p>bar</p>

Jade also supports non-buffered annotations by simply adding a horizontal bar:

-The line comment will not be output to the parsed page

P Foo

P Bar

Output:

<p>foo</p>

<p>bar</p>

Block annotations

Block annotations are processed according to indentation:

Body

//

#content

H1 Csser, focus on web front-end technology

Output:

<body>

<!--

<div id= "Content" >

</div>

-

</body>

Jade also supports conditional annotations, such as:

Body

/if IE

A (href= ' http://www.mozilla.com/en-US/firefox/') Get Firefox

Output:

<body>

<!--[If ie]>

<a href= "http://www.mozilla.com/en-US/firefox/" >get firefox</a>

<! [endif]-->

</body>

Nesting

Jade supports nesting to define tags in a natural way:

Ul

Li.first

A (href= ' # ') foo

Li

A (href= ' # ') bar

Li.last

A (href= ' # ') Baz

Block extension

Block extensions allow you to create a simple nested tag of a single line, the following example is the same as the output from the previous example:

Ul

Li.first:a (href= ' # ') foo

Li:a (href= ' # ') bar

Li.last:a (href= ' # ') Baz

Characteristics

Currently Jade supports the ' (' and ') ' character delimiters.

A (href= '/login ', title= ' View login page ') login

Alternatively, we can use a colon (:) as a separator:

A (href: '/login ', title: ' Register as a csser.com member ') login

The Boolean attribute is also supported:

Input (type= "checkbox", checked)

The Boolean attribute with a value of variable is output only when the value is true:

Input (type= "checkbox", Checked:somevalue)

Splits can also be parsed in multiple rows:

Input (type= ' checkbox ',

Name= ' agreement ',

Checked

Document type

Use!!! To increase the document type of the page:

!!!

The transition document type will be output, however:

!!! 5

The HTML5 document type will be output, and the following is the default defined document type, which can also be easily extended:

var doctypes = Exports.doctypes = {

' 5 ': ' <! DOCTYPE html> ',

' xml ': ' <?xml version= ' 1.0 ' encoding= ' utf-8 '?> ',

' Default ': ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">",

' Transitional ': ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">",

' Strict ': ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > ",

' Frameset ': ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" > ",

' 1.1 ': ' <! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > ",

' Basic ': ' <! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML Basic 1.1//en" "Http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd" > ",

' Mobile ': ' <! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.2//en" "http://www.openmobilealliance.org/tech/DTD/ Xhtml-mobile12.dtd ">"

};

To modify the default values simply change:

Jade.doctypes.default = ' Whatever you want ';

Filter filters

The filter is prefixed with a colon (:), such as: Markdown will function on the text (one note: A variable regulator similar to Smarty), and the current jade-supported filter is listed at the beginning of this page.

Body

: markdown

woah! Jade _and_ markdown, very **cool**

We can even link to [Csser] (http://www.csser.com)

After rendering:

<body><p>woah! Jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href= "http://www . csser.com ">CSSer</a></p></body>

Filters can also handle parse trees, and usually filters can handle text blocks normally, but the block filters that pass through the rules can do whatever it can.

Body

Conditionals:

if role = = ' admin '

P You is amazing

Else

P Not so amazing

Code

Jade currently supports three types of executable code, the first of which is prefixed with--and will not be buffered:

-var foo = ' Bar ';

This can be used for conditions or loops:

-For (var key in obj)

p= Obj[key]

Due to the technique of jade buffering, the following code is valid:

-If (foo)

Ul

Li Yay

Li Foo

Li worked

-Else

P Oh no! You aren't in csser.com

Even a detailed iteration loop:

-if (items.length)

Ul

-Items.foreach (function (item) {

li= Item

- })

Anything you want can be achieved!

We then escaped the buffer code to buffer the return value, prefixed by an equal sign (=):

-var foo = ' Bar '

= Foo

h1= Foo

Output: Bar

-Each Val, key in obj

Li #{key}: #{val}

This will output <li>foo:bar</li>

Nested loops can also be made:

-Each user in users

-Each role in User.roles

li= role

When a property is Undefined,jade, an empty string is output, for example:

Textarea= user.signature

The recent version of Jade will output an empty string instead of undefined:

<textarea></textarea>

Command-line tools: Bin/jade

Output HTML to standard output (stdout):

Jade Examples/*.jade--pipe

Generate examples/*.html:

Jade Examples/*.jade

Incoming parameters:

Jade Examples/layout.jade--options ' {locals: {title: ' Csser '}} '

Finish

JS template engine Jade Use syntax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.