Bind html string in controller to template does not trigger click event

问题

I have a html string in controller and I bind this to view, but the action does not trigger on clicking.

I already applied the triple braces or htmlSafe to avoid html escape, the button shows on the template but when clicking on it does not trigger action newAlert

## hello.js

import { htmlSafe } from '@ember/string';
import { computed } from '@ember/object';

export default Controller.extend({
  htmlString: computed(function() {
    return htmlSafe('<button {{action "newAlert"}}>Test Alert</button>')
  }),
  actions: {
    newAlert: function(){
      alert('Hello')
    }
  }
});

## hello.hbs

{{htmlString}}

Could you guys help me shows what is going wrong?

回答1:

As has been mentioned, there can be real security problems introduced by using raw HTML from the server. That said, there are times that is indeed needed and you may want that raw HTML to work with Ember’s event system.

The simplest way to do this is to render the raw HTML inside of a component. In the component, also add a click method to the main component body. Doing so gives you the ability to intercept raw DOM events instead of working within the actions system that Handlebars enables.

Most of the time it is simplest to live in a Handlebars world, but at times you need to get back to raw JS events.

More details on the guides here: https://guides.emberjs.com/release/components/handling-events/

来源：https://stackoverflow.com/questions/54266532/bind-html-string-in-controller-to-template-does-not-trigger-click-event