JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/gist/1763600/template.js"></script>
<script src="https://raw.github.com/gist/1049896/Extend.js"></script>
<div id="modules"></div>
<script type="text/template" id="sometemplate">
<h3><%= title %></h3>
<p bind="description"><%= description %></p>
<p><a href="#" bind="link"><%= link %></a></p>
<ul bind="options">
<% for (var i=0;i < options.length; i++) { %>
<li bind="option"><%= options[i].label %></li>
<% } %>
</ul>
</script>
CSS
#modules {font: normal 12px/16px helvetica;}
h3 {font-size: 1.2em; text-decoration: underline;}
ul {list-style: disc}
ul li {margin-left: 30px;list-style: disc}
JavaScript
/*
* Template.BindingMethods.js
* Adds the methods to a template object
* that aid in data-binding.
**/
(function (win, doc, ns) {
var forEach = Array.prototype.forEach;
Template.bindingMethods = {
bindTemplate: function () {
var blank = doc.createElement('div');
blank.innerHTML = this.compile(this._context);
this.parseBoundElements(blank);
while( blank.children.length ) {
this.container.appendChild( blank.children[0] );
}
},
parseBoundElements: function (el) {
var self = this;
if(!(el instanceof Element)) {
throw new Error(Block.errors.parseElements[0]);
}
var bound = el.querySelectorAll('[bind]');
forEach.call(bound, function (el) {
self.setBoundElement(el.getAttribute('bind'),el);
});
},
setBoundElement: function (key, element) {
var bound = this._bound[key] = this._bound[key] || [];
bound.push(element);
},
getBoundElement: function (key) {
var element;
if(!(element = this._bound[key])){
return undefined;
}
return (element.length === 1) ? element[0]: element
}
};
}(window, document, window._NAMESPACE_ || window));
/*
* Blocks.js
* The Lego kit used to stack your MVC modules
* Inside one another.
**/
(function (win, doc, ns) {
var config = {
};
var Block = ns.Block = function ( key, options ) {
this._key = key;
this._uniqueId = this.getUniqueId();
this._template = {raw: null,compiled: null};
this._bound = {};
this._context = {};
this.container = doc.createDocumentFragment();
this.initialize(options);
};
Block.prototype = {
initialize: function ( options ) {
options = this.options = this.options || Object.extend({},config,options||{});
if(options.data) {
this._context = options.data;
}
...