Cell Render Helper _ - peterwmwong/cell GitHub Wiki

Quickly craft HTML DOM nodes in CoffeeScript!

Examples

Simple

_ '#myid.myclass',  # <div id='myid' class='myclass'>
  _ '.child1'       #   <div class='child1'></div>
  _ '.child2'       #   <div class='child2'></div>
                     # </div>

Less Simple

_ 'table', cellpadding: 0,                   # <table cellpadding='0'>
  _ 'tbody',                                 #   <tbody>
    _ 'tr',                                  #     <tr>
      for i in [0...5]                       #       <td class='even'>Column 0</tr>
        _ "td.#{i%2 and 'odd' or 'even'}",   #       <td class='odd' >Column 1</tr>
          "Column #{i}"                      #       <td class='even'>Column 2</tr>
                                             #       <td class='odd' >Column 3</tr>
                                             #       <td class='even'>Column 4</tr>
                                             #     </tr>
                                             #   </tbody>
                                             # </table>

With other Views

#=== ButtonCell.coffee ===
define (require)->
  require('cell/defineView!')
    render: (_)-> [
      @options.button_text
    ]
#=========================

_ ButtonCell, button_text:'YO!' # <div class='ButtonCell'>YO!</div>

Method Signatures

_ [Selector String], [Ext]..., [Attributes Hash]?, [Children: DOM Node, String, Number, jQuery Object, Array]...

Selector String
Describes the tag name, id, and/or class(es) of the DOM Node to create. See below 'Selector String' section.
Ext
Zero to many Extensions (cell/Ext) to be applied to the DOM Node
Attributes Hash
For each key/value pair of the hash, `node.setAttribute(key, value)` is called.
Children
Each child is appended in order to the DOM Node

_ [View], [Options Hash]?

Instantiates a new cell/View and returns the View's root DOM Node (el)

Selector String

Quickly describe a DOM Node's tag name, id, and/or class(es). Format:

{tag name}?(#{id})?(.{class})*

If no tag name is specified, defaults to a <div/>

Simple Examples

'span'     # <span/>
'#myid'    # <div id='myid'/>
'.class1'  # <div class='class1/>

Combination Examples

'#myid.class1.class2'      # <div id='myid' class='class1 class2'/>
'span#myid'                # <span id='myid'/>
'span.class1.class2'       # <span class='class1 class2'/>
'span#myid.class1.class2'  # <span id='myid' class='class1 class2'/>
⚠️ **GitHub.com Fallback** ⚠️