JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<link rel="stylesheet" href="http://agroism.s3.amazonaws.com/Demos/blocks/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js"></script>
<script src="//agroism.s3.amazonaws.com/Demos/blocks/blocks.min.js"></script>
<script id="base-template" type="text/template">
<b name="header"></b>
<div class="content-wrapper container" bind="content">
</div>
<b name="footer"></b>
</script>

<script id="header-template" type="text/template"> 
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="./index.html" bind="brand">Blocks.js</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active">
            <a href="#examples">Examples</a>
          </li>
        </ul>
          
        <div class="search-wrapper pull-left">
          <div class="search-inner" bind="search">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</script>


<script id="search-template" type="text/template">
    <form class="navbar-search" bind="search-form">
      <input class="search-query span2" placeholder="Search">
    </form>
</script>

CSS

.brand.active,
.brand.active:hover{
  color: red;
}

.content-wrapper {
margin-top: 50px; 
}

JavaScript

var block = require('blocks/block')
// this is used for the base template
// just some random local variable to 
// hold state on an element    
var hasClass = false


// This creates a block that can be re-used
// or re-constructed.
var SearchBlock = block.create({
    template: $('search-template').get('text'),
    events: {
        "search-form": {
            "submit": function(e, self) {
                e.preventDefault()
                self.lookupResults()
            }
        }
    }
}, {
    lookupResults: function() {
        alert('This doesn\'t really work.')
    }
})


// Create the base pate template
var wrapper = block({
    template: $('base-template').get('text'),
    children: {
        header: block({
            template: $('header-template').get('text'),
            events: {
                "brand": {
                    "click": function(e) {
                        e.preventDefault()
                        hasClass = !hasClass
                        this.classList[hasClass ? 'add' : 'remove']('active')
                    }
                }
            },
            children: {
                search: new SearchBlock
            }
        })
    }
}).inject(document.body)


wrapper.setChild('content', new SearchBlock)