Onecup

Onecup uses coffee script's nifty function nesting trick to bring your kickass yet simple templeting library.

html ->
  body ->
    div ->
      text "get "
      a href:"https://github.com/treeform/onecup", -> "OneCup"
      text " here"

Onecup makes several assumptions:

big chunks of the page going to be re-rendered at once.
there is a need for explicit whitespace control
HTML is more of an object code then markup

Onecup excels at generating complex HTML in a few lines. It is just coffee script which is just javascript. It requires no compilation (apart from coffee script) and you can use all expressiveness and organization of coffee script anywhere in the templates.

Features

JQuery style selectors

If first argument to a template tag begins with a # or . it is treated as a id or class. It uses the JQuery selectors syntax. Example:

div "#list-holder" ->
  ol "#main-list.number-list" ->
    for i in [0..10]
	li ".number-iten", "nubmer {i}"

explicit text and whitespace

Text is explicit, yet you get explicit control over your whitespace. You also don't have to fight over whitespace minifiers, because everything produced is already minified.

div ->
  text "foo"
div ->
  text "foo"

Using text or leaving it on the same line is equivalent

p "look its the same thing"
p ->
    text "look its the same thing"

raw text

text escapes things by default so you might have to use raw if you want to inject html or other markup

div ->
  raw markdown_html

styles

Styles can be passed directly using the style attribute. This is needed when generating some complex looking HTML such as graphs and other visualizations. Or to not clutter the css with layout code that is not reusable.

div style{"z-index":5*4}, "z-index computation"
div style:{'background-color': "red"}, ->
   text "this text will be red"

html attributes

Special HTML attributes can also be passed. selected, disabled, checked, readonly, and multiple are supported. They are surprisingly awkward in other templeting engines.

div ->
  ol ->
    for i in [0..10]
      li ->
        text "nubmer {i}"
        input 
            type:check 
            checked:i==5

you can also define your own custom attributes

div data:"1234"

just coffee script

Onecup is 100% coffee script, so you can use functions, loops, if blocks, classes, and other coffee script constructs.

function

# define a common function
bbox = (content) ->
  div ".other-border", ->
    div ".inner-border", ->
	div ".inner-layout", ->
	   content()

bbox ->
  text "this box has fancy border"

bbox ->
  text "so does this"

if blocks

a = true
if a 
    p "a is true"
else
    p "a is false"

loops

colors = ["red", "green", "blue"]
for color in colors
  div style:{'color': color}

Use

How to use OneCup in your app:

# import tags into your namespace
{render, div, span, table, thead, tbody, tr, td, th, text, textarea, button, hr, iframe,
 raw, a, br, b, img, label, form, input, ul, li, h1, h2, h4, select, option, p} = window.drykup

# define a template namespace
$t = {}

# attach function to your template namespace
$t.full_doc ->
  body ->
    p "content here"

# anywhere in your code
html = onecup.render($t.full_doc(template, args))
# use JQuery (or some thing else) to insert it into html
$("html").html(html)

Origin

Onecup was originally fork of dryKup (https://github.com/mark-hahn/drykup) by Mark Hahn, which was a fork of CoffeeKup (https://github.com/mauricemach/coffeekup) by Maurice Machado. But now its a whole different thing!

KeyserSosa / onecup