coffeescript html5,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'})

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'

get '/': ->

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

render 'index'

view index: ->

for name in @franks

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

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

在浏览器中使用：

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

命令行：

; 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。

资源

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]系列：

项目主页