Jade和Handlebars

Jade的语法和特性

标签

  h1 Practical Node.js
  p The only book people will ever need

变量/数据

  p=body

向这个模板传入这个body参数 =必须紧挨者标签
属性
多个属性之间使用，分割
div(id=”test”) dsakdasdk
必须向这个模板传入isChecked这个参数
input(type=”checkBox”,checked=’isChecked’)
字面量
在标签之后直接向写属性
div#test dsakdasdk
文本
通过|可以输出原始的 文本
script.
console.log(111);
在jade的模板那编译的时候使用javaScript代码

  -var arr=['a','b','c']
    ul
     -for(var i=0;i<arr.length;i++)
        li
          span=i+"*****"
          span!="unescaped"+arr[i]+"*****"
          span="escaped"+arr[i]+"*****"

等价于

  <ul>
       <li>
            <span>0*****</span>
            <span>unescapeda*****</span>
            <span>escapeda*****</span>
       </li>
       <li>
            <span>1*****</span>
            <span>unescapedb*****</span>
            <span>escapedb*****</span>
       </li>
       <li>
            <span>2*****</span>
            <span>unescapedc*****</span>
            <span>escapedc*****</span>
       </li>
      </ul>

jade和Handlebars的一个主要的区别就是：jade允许在代码里边使用几乎所有的js代码，但是Handlebars则只能说使用少量的内置和自定义的helpers
jade中的if语句
给if前边加一个- if就成了js的if否则就是jade的if
jade的if的使用

  -var user={}
  -user.admin=true;
    if user.admin
      div user为true
    else
      div  user为false

使用的时候一定要注意if和else 中的内容的对齐
使用js下的if 能够及时的检测出对其的是否有错误

  -var user={}
  -user.admin=false;
    -if(user.admin)
       div user为true
    -else
       div  user为false

jade中的each语句

 -var language=['php','node','ruby']
    div
       each value,index in language
            p=value+"***********"+index

读取变量

  h3 #{title}

和标签之间有距离 没有距离的话会解读成属性
case语句

 -var cc=2;
    case cc
      when 1
        p cc的值为1
      when 2
        p cc的值为2

include
把逻辑提取到单独的文件里的一种方式，目的是让多个文件可以重复的使用。。编译时会把include 语句的文件都记载进来主文件选择性使用，没有办法给他使用变量
extend
自地向上 包含的文件决定要替换主文件的哪一部分
格式是 extend fileName 和block blockName
主文件中 block blockName
子文件中 extend fileName和block blockName