2014年04月23日

Jadeの基本

Jadeの基本

次のように書くと

doctype
html
head
meta(charset="utf-8")
title test
body
h1 test


次のようにコンパイルされる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<h1 id="id00">test</h1>
<p class="class00">test</p>
</body>
</html>


基本はインデント記法で属性は(name="value")もしくは(name='value')で、idは#id名をclassは.class名を続けて書く。テキスト等は半角スペースを入れて書く。実際は改行されずに上記のコードが出力されます。

改行を入れたい場合は改行してインデントして|(パイプ)を入れる。

p hogehoge
|fugafuga


<p>hogehoge
fugafuga</p>


JavaScriptのコードを入れたり、HTMLをそのまま書きたい場合は.(ドット)で終わらした後にインデントして記述。

script.
$(function(){
alert("ok");
});


<script>$(function(){
alert("ok");
});</script>


-(ハイフン)で変数などを定義できるので#{変数名}でテンプレート内に記述できる

- hoge = "ほげ"
p #{hoge}


<p>ほげ</p>


=(イコール)で直接挿入することも可能

- hoge = "ほげ"
p=hoge


<p>ほげ</p>


=の後はJavaScriptの命令が記述できる



<p>ほげhoge3</p>


node.jsで定義した変数を渡したい場合は以下のように実行時に引数でわたしてあげる

jade.compile(index)({
fuga:"fuga"
});


if文、else if文、else文などもインデント記法で

- tenki = "曇り"

if tenki == "晴れ"
p 日傘を持っていく
else if tenki == "雨"
p 傘を持っていく
else
p 傘を持っていかない


for in構文も利用可能

- arr = [1,2,3]

for value in arr
p=value


同様にeach inも利用可能

each value in arr
p=value


通常のfor文を使いたい場合などは-をつかってJS構文を利用するとよい。JavaScripが使えるので複雑なこともできる

- arr = ["a","b","c","d"]
- for(var i = 0; i<arr.length ;i++){
- if(i==arr.length-1){
p.last-child=arr[i]
- }else{
p=arr[i]
- }
- }
タグ:JADE node.js
posted by ねこまんま at 15:38 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック