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

Ember CLI
1

HTML:

<div class="tag-container" id="tag-container">
  <span class='dashfolio-tag'>tag1</span><span class='dashfolio-tag'>tag2</span><span class='dashfolio-tag'>tag3</span>
</div>

jQuery:

$(document).ready(function(){
$(function(){
  $("#add-tag-input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {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

2

Rather than copy-pasting jQuery code into an Ember app, I’d pause and think about what the code is supposed to help you do.

It looks to me like there’s an input field. When that input is focused out, or when the user presses the comma or Enter key, you want to create a tag and display it to the user.

As a first step, see if you can create a component with an array of 3 tags and display the tags in the component’s template.

Second step, add an <input> element to the component’s template?

Afterwards, we can look at how to listen to input events and update the array of tags.