CoffeeKup-CoffeeScriptベースのHTMLテンプレートエンジン

Coffeekupは、CoffeeScriptベースのHTMLテンプレートエンジンです.HTMLテンプレートを100%純粋なCoffeeScriptで作成できます.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 [email protected]: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

ブラウザで使用:

  $('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は完全に使用できます.
しげん

API参照

メールリスト

工単

IRC: #coffeekup irc.freenode.net

入門紹介

ツール

html 2 coffeekup変換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第1部

Inside CoffeeKup第2部

Inside CoffeeKup第3部

Inside CoffeeKup第4部

プロジェクトのホームページ

CoffeeKupホームページ

GitHub