Ember snippets

_info.md

Tags

Words separate on commas. See jsbin.

Tags have color support - suffix the tag with :c where c is a color (r, b, g or y)

stuff.js

// basic
App.IndexController = Ember.Controller.extend({
	tempWord: '',
	
	tagArr: function(){
		return Ember.A(['this is red:r', 'and this is uncolored'])
	}.property(),
	
	
	currentTag: function(){
		var word = this.get('word')
	}.property('word'),
	
	actions: {
		newWord: function(word){
			this.get('tagArr').pushObject( this.get('tempWord').slice(0, -1).trim() );
			this.set('tempWord', '')
		},
		previousWord: function(){
			var tags = this.get('tagArr')
			if ( tags.length > 0 ){
				var word = tags.popObject()
				this.set('tempWord', word)
			}
		},
		removeTag: function(tag){
			this.get('tagArr').removeObject(tag)
		}
	}
});

// input component
App.TagInputComponent = Ember.TextField.extend({
	checkKey: function(e,a,b){
		var key = e.keyCode
        
		if ( key === 188 ){
			// comma was typed
			this.sendAction('newWord');

		} else if ( key === 8 ){
			// backspace was pressed
			if ( !this.get('value') ){
				this.sendAction('previousWord');
			}
		} else if ( key === 13 ){
			// enter was pressed, finish editting
		}
	}.on('keyUp'),
});

// tag component
App.InfoTagComponent = Ember.Component.extend({
    tagName: 'span',
	classNames: ['tag'],
	classNameBindings: ['tag.color'],
	
	tag: function(){
		var rawTag = this.get('rawTag')
		var split = rawTag.split(':');
		
		var tag = { text: split[0] }
		
		if (split[1]){
			var color = split[1];
			if (color === "r"){
				tag.color = "red"
			}
			if (color === "g"){
				tag.color = "green"
			}
			if (color === "b"){
				tag.color = "blue"
			}
		}
		return tag
	}.property('rawTag'),
	
	actions: {
		removeTag: function(){
			this.sendAction('removeTag', this.get('rawTag') )
		}
	}
})

templates.html

// basic
<script type="text/x-handlebars" data-template-name="index">
	{{#each rawTag in tagArr}}
		{{info-tag rawTag=rawTag removeTag="removeTag" }}
	{{/each}}
	
	{{tag-input value=tempWord newWord="newWord" previousWord="previousWord"}}
</script>

// tag
<script type="text/x-handlebars" data-template-name="components/info-tag">
	<button {{action "removeTag"}}>X</button>
	{{tag.text}}
</script>