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

Question

我有以下Ember手柄模板，我想动态地将它渲染到DOM，包括onclick事件监听器。怎么在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动作。如果是这种情况，那么mixin或service是不是组件的方式。

Answer 2

首先你的问题是错的：你不会问你是否可以渲染动态HTML，但是你是否可以渲染动态手柄！简答：不。

答案很长：

您的主要误解可能是您认为ember在某些时候在浏览器中呈现手柄字符串。它不是！在编译期间，Ember将把手编译为闪烁的VM字节代码。手柄编译器或手柄模板永远不会被发送到浏览器。所以没有什么可以解析把手。

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

另请注意，呈现HTML（可能）是一种安全风险。我建议你问一个关于如何做你真正想要的新问题，而不是专注于解决问题的具体方法。