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

時間 2020-03-05

標籤 coffeekup 基於 coffeescript html 模板引擎欄目 HTML 简体版

原文原文鏈接

Coffeekup是基於CoffeeScript的HTML模板引擎。它可讓你用100%純CoffeeScript編寫HTML模板。node.js和瀏覽器均可以使用。javascript

代碼樣例

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%的純咖啡哦！css

爲何要使用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可能不是一個好選擇：html

你追求極致簡潔的語法，而且這一追求是你最重要的考慮因素。在這一方面，Jade立於不敗之地。
你使用div和類表達全部東西。雖然 CoffeeKup中你可使用 div '#id.class.class'，可是別的模板語言一般有更簡短的寫法。
你但願使用CoffeeScript來表達展現邏輯，而將HTML限制在markup。那麼，你想要的是Eco。
你的項目、團隊和口味告訴你，專門的模板語言確實有好處。

安裝

npm install coffeekup

全局安裝：java

npm install coffeekup -g

使用最新版：node

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.'"

定義變量：jquery

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)

編譯函數：git

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

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

配合express：github

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：web

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。