JSFiddle - React, Tailwind, and code Playground

by Ashley Coolman

HTML

<script src="https://dl.dropboxusercontent.com/s/b9pvqsaadacp0nt/handlebars.js"></script>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/9npw38qcvb9s613/embermandl.js"></script>


	<script type="text/x-handlebars" data-template-name="application">
		    {{outlet}}
		</script>


		<!-- ROUTE INDEX -->
		<script type="text/x-handlebars" data-template-name="index">
			<div class="left">
				
				<span class="clear-left bold"><br/>View: simple</span>		
				<span class="clear-left bold">Controller: auto-assigned</span>				
				<span class="clear-left bold">= <span class="darkgreen">Renders</span> but <span class="darkred"> No DynamicController behaviour</span></span>
				<span class="clear-left">DynamicView&#39;s controller is auto-wired to its parent (a ContainerView) as a default</span>
				<span class="clear-left">Thus the error: <i>Uncaught Error: Nothing handled the event 'callDynamicController'</i></span>
				<button {{action "addDynamic" }}> 								+ dynamic </button>
				
				<span class="clear-left bold"><br/>View: has render helper in template</span>		
				<span class="clear-left bold">Controller: auto-assigned</span>		
				<span class="clear-left bold">= <span class="darkgreen">Renders</span> but <span class="darkred"> No DynamicController behaviour</span></span>
				<span class="clear-left">DynamicView&#39;s controller is auto-wired to its parent (a ContainerView) as a default</span>
				<span class="clear-left">Thus the error: <i>Uncaught Error: Nothing handled the event 'callDynamicController'</i></span>
				<button {{action "addDynamicWithControl" }}> 					+ dynamic & Control </button>

				
				<span class="clear-left bold"><br/>View: simple</span>		
				<span class="clear-left bold">Controller: manual-assigned</span>		
				<span class="clear-left bold">= <span class="darkgreen">DynamicController behavior</span> (<span class="darkred">controller lacks some...

CSS

.section {
			width:100%; 
		}
		.box {
			float:left; 
			padding:0.5em; 
			margin:0;
		}
		.container {
			background-color:#eeFeee;
		}
		.static-container {
			background-color:#99cc99;
			margin:0.5em;
			clear: left;
		}
		
		.dynamic-container {
			background-color:#9999cc;
			margin:0.5em;
			width: 135px;
		}
			
		.logit {
			background-color:#333;
			color:#ccc;
			font-size: 0.75em;
		}
		.logit-old {
			
			color:#999;
		}
		.logit *{
			padding:0;
			margin:0;
		}
		.thing {
			width: 120px;
			color:white;
			text-transform:capitalize;
			padding:0.25em;
    		margin:0.25em;
			font-weight:bold;
			font-size:10px;
		}
		.static, .static-with-control, .static-with-render {
			background-color: green;
			color: white;
		}
		.dynamic, .dynamic-with-control, .dynamic-with-render {
			background-color: purple;
			color: white;
		}
		.things-added-str {
			padding:0.5em;
			font-size:12px;
		}
		.things-added-str-list {
			text-transform:capitalize;
		}
		.red {
			color:red;
		}
		.left {
			float:left;
		}
		.clear-left {
			font-size: 0.75em;
			clear: left;
			float: left;
		}
		button {
			font-size: 0.75em;
			float: left;
			clear:left;
		}
		.darkgreen {
				color: #33CC33;
		}
		.darkred {
			color: red;
			
		}
		.bold {
			font-weight: bold;
		}

JavaScript

Ember.Handlebars.registerHelper('controlWithVars', function(path, modelPath, options) {

	    if (arguments.length === 2) {
	      options = modelPath;
	      modelPath = undefined;
	    }

	    var model;

	    if (modelPath) {
	      model = Ember.Handlebars.get(this, modelPath, options);
	    }

	    var controller = options.data.keywords.controller,
	        view = options.data.keywords.view,
	        children = Em.get(controller, '_childContainers'),
	        controlID = options.hash.controlID,
	        container, subContainer; 

	    if (children.hasOwnProperty(controlID)) {
	      subContainer = children[controlID];
	    } else {
	      container = controller.get('container'),
	      subContainer = container.child();
	      children[controlID] = subContainer;
	    }

	    var normalizedPath = path.replace(/\//g, '.');

	    var childView = subContainer.lookup('view:' + normalizedPath) || subContainer.lookup('view:default'),
	        childController = subContainer.lookup('controller:' + normalizedPath),
	        childTemplate = subContainer.lookup('template:' + path);
		
		
			if (!window['controller']) window['controller'] = 0;

			for (var k in options.hash) {
				//TODO test if typeof Ember.Controller 	//childController.set(k, val);
				childController[k]=options.hash[k]; //TODO test if typeof Ember.ObjectController
			}

		

	    Ember.assert("Could not find controller for path: " + normalizedPath, childController);
	    Ember.assert("Could not find view for path: " + normalizedPath, childView);

	    Em.set(childController, 'target', controller);
	    Em.set(childController, 'model', model);

	    options.hash.template = childTemplate;
	    options.hash.controller = childController;

	    function observer() {
	      var model = Ember.Handlebars.get(this, modelPath, options);
	      set(childController, 'model', model);
	      childView.rerender();
	    }

	    Ember.addObserver(this, modelPath, observer);
	    childView.one('willDestroyElement', this,...