CoffeeKup —— 基于CoffeeScript的HTML模板引擎

Coffeekup是基于CoffeeScript的HTML模板引擎。它可以让你用100%纯CoffeeScript编写HTML模板。node.js和浏览器都可以使用。

CoffeeKup —— 基于CoffeeScript的HTML模板引擎

代码样例

doctype 5

html ->

  head ->

    meta charset: 'utf-8'

    title "#{@title or 'Untitled'} | A completely plausible website"

    meta(name: 'description', content: @description) if @description?​

    link rel: 'stylesheet', href: '/css/app.css'​

    style '''

      body {font-family: sans-serif}

      header, nav, section, footer {display: block}

    '''​

    script src: '/js/jquery.js'​

    coffeescript ->

      $(document).ready ->

        alert 'Alerts suck!'

  body ->

    header ->

      h1 @title or 'Untitled'​

      nav ->

        ul ->

          (li -> a href: '/', -> 'Home') unless @path is '/'

          li -> a href: '/chunky', -> 'Bacon!'

          switch @user.role

            when 'owner', 'admin'

              li -> a href: '/admin', -> 'Secret Stuff'

            when 'vip'

              li -> a href: '/vip', -> 'Exclusive Stuff'

            else

              li -> a href: '/commoners', -> 'Just Stuff'

    div '#myid.myclass.anotherclass', style: 'position: fixed', ->

      p 'Divitis kills! Inline styling too.'

    section ->

      # A helper function you built and included.

      breadcrumb separator: '>', clickable: yes

      h2 "Let's count to 10:"

      p i for i in [1..10]

      # Another hypothetical helper.

      form_to @post, ->

        textbox '#title', label: 'Title:'

        textbox '#author', label: 'Author:'

        submit 'Save'

    footer ->

      # CoffeeScript comments. Not visible in the output document.

      comment 'HTML comments.'

      p 'Bye!'

怎么样?没骗你吧?真的是100%的纯咖啡哦!


为什么要使用CoffeeKup?

  • 一门语言走天下。JavaScript遍天下,因此CoffeeScript也遍天下。使用CoffeeScript可以编写服务器、浏览器,甚至数据库。如果你打算统一服务器端和客户端的展示逻辑和UI结构,CoffeeKup能帮大忙。
  • 一门棒极了的语言。CoffeeScript是如此地清晰,如此地富有表达力,如此地强大。很难找到像CoffeeScript这样的语言,何况CoffeeScript还是可以在浏览器端运行的语言。
  • 不用再学一门专门的语言。直接用CoffeeScript就是了。
  • 将模板嵌入CoffeeScript。模板即函数。当你将它们嵌入CoffeeScript应用时,编辑器或IDE的语法高亮和语法检查可以正常工作。
  • 将CoffeeScript嵌入模板。同理,你可以在模板中嵌入CoffeeScript代码,语法高亮和语法检查同样可以正常工作。
  • 良好的编辑器支持。所有支持CoffeeScript的编辑器和IDE都能支持CoffeeKup。
  • 统一的前后端。客户端和服务器端使用相同的模板语言,同样的实现。
  • 扩展成高级DSL很容易。由于所有的元素都是函数,因此定制标签很容易。自定义的标签和“原生”的标签一样工作。
  • HTML 5就绪。支持doctypes等特性。
  • 可选的自动转义。你可以使用h帮助函数。
  • 可选的格式。可以使用换行和缩进。
  • 兼容CoffeeScript和JavaScript。


为什么不使用CoffeeKup?

以下情况,CoffeeKup可能不是一个好选择:

  • 你追求极致简洁的语法,并且这一追求是你最重要的考虑因素。在这一方面,Jade立于不败之地。
  • 你使用div和类表达所有东西。虽然 CoffeeKup中你可以使用 div '#id.class.class',但是别的模板语言通常有更简短的写法。
  • 你希望使用CoffeeScript来表达展示逻辑,而将HTML限制在markup。那么,你想要的是Eco
  • 你的项目、团队和口味告诉你,专门的模板语言确实有好处。


安装

npm install coffeekup

全局安装:

npm install coffeekup -g

使用最新版:

git clone git@github.com:mauricemach/coffeekup.git && cd coffeekup

cake build

npm link

cd ~/myproject

npm link coffeekup

使用

ck = require 'coffeekup'

ck.render -> h1 "You can feed me templates as functions."

ck.render "h1 'Or strings. I am not too picky.'"

定义变量:

template = ->

  h1 @title

  form method: 'post', action: 'login', ->

    textbox id: 'username'

    textbox id: 'password'

    button @title

helpers =

  textbox: (attrs) ->

    attrs.type = 'text'

    attrs.name = attrs.id

    input attrs

ck.render(template, title: 'Log In', hardcode: helpers)

编译函数:

template = ck.compile(template, locals: yes, hardcode: {zig: 'zag'})

template(foo: 'bar', locals: {ping: 'pong'})

配合express

app.set 'view engine', 'coffee'

app.register '.coffee', require('coffeekup').adapters.express

app.get '/', (req, res) ->

  # Will render views/index.coffee:

  res.render 'index', foo: 'bar'

配合zappa

get '/': ->

  @franks = ['miller', 'oz', 'sinatra', 'zappa']

  render 'index'

view index: ->

  for name in @franks

    a href: "http://en.wikipedia.org/wiki/Frank_#{name}", -> name

配合meryl

coffeekup = require 'coffeekup'

meryl.get '/', (req, resp) ->

  people = ['bob', 'alice', 'meryl']

  resp.render 'layout', content: 'index', context: {people: people}

meryl.run

  templateExt: '.coffee'

  templateFunc: coffeekup.adapters.meryl

在浏览器中使用:

<script src="template.js"></script>

<script>

  $('body').append(templates.template({foo: 'bar'}));

</script>

命令行:

; coffeekup -h

Usage:

  coffeekup [options] path/to/template.coffee

      --js           compile template to js function

  -n, --namespace    global object holding the templates (default: "templates")

  -w, --watch        watch templates for changes, and recompile

  -o, --output       set the directory for compiled html

  -p, --print        print the compiled html to stdout

  -f, --format       apply line breaks and indentation to html output

  -u, --utils        add helper locals (currently only "render")

  -v, --version      display CoffeeKup version

  -h, --help         display this help message

注意,虽然我们的例子都用了CoffeeScript,但是你完全可以使用javascript。


资源


工具

  • html2coffeekup 转换HTML为CoffeeKup
  • htmlkup 另一个转换工具
  • ice 在Rails中使用CoffeeKup和Eco
  • coffee-world 监视、自动编译 CoffeeKup、coffee-css和CoffeeScript 到 HTML、CSS、JavaScript。
  • cupcake 支持CoffeeKup的 Express应用生成器。


CoffeeKup的内部

想了解CoffeeKup的内部实现?请看[Inside CoffeeKup]系列:


项目主页

上一篇:Bootstrap系列 -- 44. 分页导航


下一篇:.js文件中文乱码解决办法