JSFiddle - React, Tailwind, and code Playground

by drulia

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<div id="content"></div>

<script type="x-handlebars">
    {{view App.Input name="username" placeholder="Username" valueBinding="username"}}
    {{view App.Input name="password" placeholder="Password" valueBinding="password" type="password"}}
</script>

CSS

#content {
    margin: 20px;
}

JavaScript

window.App = Ember.Application.create({
	rootElement: '#content'
});

App.Input = Ember.View.extend({
	classNames: ['block','fieldCon'],
	value: null,
	
	inputView: Ember.TextField.extend({
		classNames: 'input',
		attributeBindings: ['name'],
		type: function() {
			return this.get('parentView.type') || 'text';
		}.property(),
		name: function() { this.get('parentView.name'); }.property(),
        template: Handlebars.compile('{{view view.inputView valueBinding="view.value"}}')
	}),
	
	labelView: Ember.View.extend({
		tagName: 'label',
		classNames: 'placeholder',
		isVisible: function() {
			return Ember.isEmpty(this.get('parentView.value'));
		}.property('parentView.value'),
		didInsertElement: function() {
			var id = this.get('parentView.childViews').objectAt(1).get('elementId');
			this.$().attr('for',id);
		},
        template: Handlebars.compile('{{#view view.labelView placeholderBinding="view.placeholder"}}{{view.placeholder}}{{/view}}')
	})
});