将控制器中的html字符串绑定到模板不会触发click事件 [英] Bind html string in controller to template does not trigger click event

问题描述

我在控制器中有一个html字符串，我将其绑定以查看，但是单击时不会触发该操作。

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

我已经应用了三括号或 htmlSafe 以避免html逃逸，该按钮会显示在模板上，但是单击它不会触发操作 newAlert

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?

推荐答案

如上所述，使用服务器上的原始HTML可能会引入真正的安全问题。就是说，有时候确实需要，您可能希望原始HTML与Ember的事件系统一起工作。

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.

最简单的方法是呈现原始组件内部的HTML。在组件中，还将 click 方法添加到主体组件主体。这样做使您能够拦截原始DOM事件，而不是在Handlebars启用的动作系统中工作。

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.

在大多数情况下，生活在车把世界中是最简单的，但有时您需要回到原始的JS事件。

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.

此处提供有关指南的更多详细信息： https：// guides .emberjs.com / release / components / handling-events /

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

这篇关于将控制器中的html字符串绑定到模板不会触发click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！