How To append Action in component.js

Ember CLI
1

Hello Team ,

I have created text field dynamically from javascript

$(“myDiv”).append(‘’)

But I also want add action to it like below

$(“myDiv”).append(‘<input type=“text” onblur={{action “validateField”}} class=“form-control mgmt-input” placeholder=“”>’)

but its not working ,could you please help me out with it, how I can do this

2

You probably should not be using jQuery’s append method to add content in a template. It’d be better to rely on handlebars to do this.

e.g.

The action taken to insert your text field would set a property on the controller or component:

// my-controller-or-component.js

isSecondInputVisible: false

actions: {
  didSomething() {
    this.set('isSecondInputVisible', true);
  }
}

Then in template, you could rely on that property top let handlebars display the input when true

{{!-- my-route-or-component-template.hbs --}}

{{#if isSecondInputVisible}}
  <input type=“text” onblur={{action “validateField”}} class=“form-control mgmt-input” placeholder="">
{{/if}}

As a note, this kind of question would probably be better to ask on stackoverflow.

1 Like
3

Thanks Gregone, sure will take care from next time