如何在组件中呈现动态HTML？

Question

我有以下Ember车把模板，并且想通过onclick事件侦听器将其动态呈现到DOM。 在EmberJS中如何做？

hello.js

export default Ember.Component.extend({
    didInsertElement() {
        var message = `
            <p>Hello World!</p>
            <a onclick={{action "handleOpenUrl"}}>Learn More</a>
        `;
        this.set('message', message);
    },

    actions: {
        handleOpenUrl() {
            //open url code
        }
    }
});

hello.hbs

{{{message}}}

DOM中的预期输出

<p>Hello World!</p>
<a>Learn More</a>

当我单击了解更多时，应该调用handleOpenUrl

Answer 1

您应该有更多这样的东西：

hello.js

export default Ember.Component.extend({
   showMessage:false,
   actions: {
        handleOpenUrl() {
            //open url code
        }
    }
});

hello.hbs

{{#if showMessage}}
   <p>Hello World!</p>
   <a {{action "handleOpenUrl"}}>Learn More</a>
{{/if}}

然后，您可以切换showMessage来隐藏或显示您的HTML。 您的动作声明也是错误的（我已经在上面更正了），请参阅https://guides.emberjs.com/release/templates/actions/

然后，您可以在主要路线中使用该组件：

{{hello showMessage=true}}

如果要呈现不同的HTML，则需要使用yield ：

{{#if showMessage}}
   {{yield}}
{{/if}}

这将允许您以这种方式消耗组件：

{{#hello showMessage=true}}
   <p>Hello World!</p>
   <a {{action "handleOpenUrl"}}>Learn More</a>
{{/hello}}

您的action 现在不再存在于组件中 。 您现在需要将动作添加到控制器中 。 TBH如果要执行此操作，我看不到使用组件的意义。 只需使用标准的{{#if}}

看来您刚尝试重用onclick动作。 如果是这种情况，那么混合或服务就不是组件。

Answer 2

首先，您的问题是错误的：您不询问是否可以呈现动态HTML，而是可以呈现动态把手 ！ 简短的回答：不。

长答案：

您的主要误解可能是您认为ember有时会在浏览器中渲染车把字符串。 它不是！ Ember在编译期间将车把编译为微弱的VM字节码。 车把编译器或车把模板永远不会发送到浏览器。 因此，没有任何内容可以解析车把。

您想要的可能很容易实现，但这是典型的X / Y问题。

还应注意，渲染HTML（可能的做法）存在安全风险。 我建议您提出一个新的问题，关于如何做自己想做的事情，而不要着眼于解决问题的特定方法。