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
)
// 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') ) | |
} | |
} | |
}) |
// 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> |