batman.js template

by ernestohs

HTML

<script src="https://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/es5-shim.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/batman.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/batman.jquery.js"></script>
<link rel="stylesheet" href="http://batmanjs.org/examples/resources/reset.css">
<a data-event-click="selectCollection">Foo</a>
<a data-event-click="selectCollection">Bar</a>

<ul>
  <li data-foreach-thing="hash[collection]">
    <span data-bind="thing"></span>:
    <span data-bind="hash[collection][thing]"></span>
  </li>
</ul>
<span data-bind="hash[collection] | property 'length'"></span>

<fieldset>
    <legend>Bar's Hash</legend>
<ul>
  <li data-foreach-thing="hash.Bar">
    <span data-bind="thing"></span>:
    <span data-bind="hash.Bar[thing]"></span>
  </li>
</ul>
<span data-bind="hash.Bar | property 'length' | append ' things'"></span>
</fieldset>















































<!-- This enables us to run coffeescript below. --->
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s);b=b[b.length-2].innerHTML.split(n); d.write('<'+s+' type="text/coffeescript">'+b.slice(2,b.length-2).join(n)+'</'+s+'>');})()</script>

CSS

body {
    background-color: #f0f0f0;
}

#container {
    display: block;
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
}

h2 {
  clear: both;
}

JavaScript

# batman.js jsfiddle Template ©2011 CJ Lazell

class Hello extends Batman.App
  @global true
      
  @selectCollection = (node) =>
    unless @hash.get(node.innerText)
      H = @hash.set(node.innerText, new Batman.Hash())
      H.set('a', node.innerText)
      do (H) -> setTimeout (-> H.set('eh', node.innerText)), 1000
    @set 'collection', node.innerText
      
  @hash = new Batman.Hash()

  # We have to do this bit to hack around:
  #  * No `data-waitfor` deferred binding construct yet
  #  * `data-bind` missing our @collection
  @set 'collection', null

Batman.Filters.property = (obj, prop) ->
  return obj?[prop]
      
Hello.run()