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

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

代码样例

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: ->

 fornamein @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

在浏览器中使用：

<scriptsrc="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。

资源

• API 参考
• 邮件列表
• 工单
• IRC: #coffeekup irc.freenode.net
• 入门介绍

工具

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

CoffeeKup的内部

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

• Inside CoffeeKup 第一部分
• Inside CoffeeKup 第二部分
• Inside CoffeeKup 第三部分
• Inside CoffeeKup 第四部分

项目主页

• CoffeeKup主页
• GitHub