I have HTML and jQuery as below, I want to convert that into EmberJS

[simpledeveloper]

HTML:

  tag1tag2tag3

jQuery:

$(document).ready(function(){
$(function(){
$("#add-tag-input").on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("", {text:txt.toLowerCase(), appendTo:"#tag-container", class:"dashfolio-tag"});

      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('.tag-container').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });
});
});

And CSS:

.tag-container {
max-width: 300px; /* helps wrap the tags in a specific width */
}

.dashfolio-tag {
  cursor:pointer;
  background-color: blue;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin-top: 3px; /\*incase tags go in next line, will space \*/
  color:#fff;
  margin-right: 4px;
  background:#789;
  padding-right: 20px; /\* adds space inside the tags for the 'x' button \*/
}

.dashfolio-tag:hover{
  opacity:0.7;
}

.dashfolio-tag:after { 
 position:absolute;
 content:"×";
 padding:2px 2px;
 margin-left:2px;
 font-size:11px;
}

#add-tag-input {
  background:#eee;
  border:0;
  margin:6px 6px 6px 0px ; /\* t r b l \*/
  padding:5px;
  width:auto;
}

We are using less, instead of CSS, can you please help in converting the above code into Ember JS

[ZurdoDev]

I suggest you describe where you are stuck. Asking someone to do all the work for you will not likely get you any help.

Social Media - A platform that makes it easier for the crazies to find each other. Everyone is born right handed. Only the strongest overcome it. Fight for left-handed rights and hand equality.

[simpledeveloper]

I did resolve it buddy, here it is:

{{#tag-input
tags=tags
addTag=(action 'addTag')
removeTagAtIndex=(action 'removeTagAtIndex')
as |tag|
}}
{{tag}}
{{/tag-input}}