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="text/x-handlebars">
    {{view App.Input name="username" placeholder="Username" valueBinding="username"}}
    {{view App.Input name="password" placeholder="Password" valueBinding="password" type="password"}}
</script>

<script type="text/x-handlebars" data-template-name="input">
    {{#view view.labelView placeholderBinding="view.placeholder"}}
        {{view.placeholder}}
    {{/view}}
    {{view view.inputView valueBinding="view.value"}}
</script>

CSS

#content {
    margin: 20px;
}

.fieldCon {
    position: relative;
    margin-bottom: 10px;
}
.placeholder {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #888;
}
.input {
    height: 34px;
    padding: 0 10px;
}

JavaScript

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

App.ApplicationController = Ember.ArrayController.extend({
	username: '',
	password: ''
});

App.Input = Ember.View.extend({
	classNames: ['fieldCon'],
	value: '',
    templateName: 'input',
	
	inputView: Ember.TextField.extend({
		classNames: 'input',
		attributeBindings: ['name'],
		
        type: function() {
			return this.get('parentView.type') || 'text';
		}.property(),
		
        name: function() {
            this.get('parentView.name');
        }.property()
	}),
	
    // label will be used as a placeholder
	labelView: Ember.View.extend({
		tagName: 'label',
		classNames: 'placeholder',
		
        isVisible: function() {
			return Ember.isEmpty(this.get('parentView.value'));
		}.property('parentView.value'),
        
        // this part is tricky and I couldn't figure out any cleaner way to do this
		didInsertElement: function() {
			var id = this.get('parentView.childViews')
                        .objectAt(1)
                        .get('elementId');
			this.$().attr('for',id);
		}
	})
});