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。
资源
工具
- html2coffeekup 转换HTML为CoffeeKup
- htmlkup 另一个转换工具
- ice 在Rails中使用CoffeeKup和Eco
- coffee-world 监视、自动编译 CoffeeKup、coffee-css和CoffeeScript 到 HTML、CSS、JavaScript。
- cupcake 支持CoffeeKup的 Express应用生成器。
CoffeeKup的内部
想了解CoffeeKup的内部实现？请看[Inside CoffeeKup]系列：
