Render.js examples

All examples are in coffee script. If everything else fails, covert here http://js2coffee.org/

template: """
                  <H3>URL bind</H3>
                  <input bind='link' /><button class='btn'>Submit</button>
                  <div if='link'>URL here</div><div if='! link'>NO URL</div></div>"""

template: """
                  <H3>URL bind</H3>
                  <input bind='link' /><button class='btn' bind="btn">Submit</button>"""
                onchange: ->
                  return @node.btn.disable 'Link is req' unless @data.link
                  return @node.btn.disable 'At least 5 chrs' if @data.link.length < 5
                  @node.btn.enable 'Submit'

template: """
                  <H3>Timer in ms</H3>
                  <div><button bind="start">Start</button><button bind="stop">Stop</button></div>
                  <div bind="time"></div>
                  """
                start_timer: ->
                  @_timer = setInterval =>
                    @node.time.html (new Date()).getTime()
                    @node.start.disable()
                    @node.stop.enable()
                  , 100
                once: ->
                  @start_timer()
                bind:
                  start:->
                    @start_timer()
                  stop: (node)->
                    clearInterval @_timer
                    @node.start.enable()
                    @node.stop.disable()

template: """
                  <h3>To to (<span bind="count"></span>)</h3>
                  <form bind="add_todo">
                  <input bind="todo" />
                  </form>
                  <ul bind="out"></ul>
                  """
                data:
                  list:['buy milk']
                bind:
                  add_todo: ->
                    return unless @data.todo
                    @data.list.push @data.todo
                    @data.todo = ''
                onchange: ->
                  ret = []
                  for el in @data.list
                    ret.push "<li>#{el}</li>"
                  @data.out = ret.join("\n")
                  @data.count = @data.list.length

script: 'https://raw.github.com/evilstreak/markdown-js/master/lib/markdown.js'
                template: """
                  <h3>Markdown data</h3>
                  <textarea bind="md_data" style="width:96%; height:100px;"></textarea>
                  <h4>Preview</h4>
                  <div bind="md_prev" style="background:#eee;padding:5px;"></div>
                  """
                onchange: ->
                  @node.md_prev.html = markdown.toHTML(@data.md_data)

Call in any way

$(node).render(opts, data)

Render.to(node, opts, data)

You can use inline templates

<div id="inline">
                <H3>URL bind</H3>
                <form bind="hclick">
                  <input bind='link' />
                  <button class='btn'>Submit</button>
                </form>
              </div>
              <script>
                $('#inline').render(opts)
              </script>

Options

$(node).render(opts, data)
              ---
              node: '#node' || [DOM object] || [jQuery object]
              data: {}
              opts:
                template
                  #data           : takes .html()
                  /ajax.html      : $.get and render
                  f(data) {}      : execute() and render
                  <div>blah</div> : raw data
                script: [scripts to preload]     
                bind:
                  el_on_state_change:(node, value) ->
                    function data        
                data: { el1:1, el2:2, ... }

Default binds

button - onclick
              form - onsubmit
              input[type=text] - onkeyup
              input[type=checkbox] - onclick

Methods

# Render in element
              Render.to(node, opts, data)
              
              # Replad render part
              Render.refresh(any_dom_or_jQuery_node_inside_part)