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操作。如果是这种情况，那么mixin或service便不是组件。

Answer 2

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

长答案：

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

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

还请注意，呈现HTML（可能）会带来安全风险。我建议您问一个新的问题，即如何做自己想要做的事情，而不要着眼于解决问题的特定方法。

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

2 个答案:

hello.js

hello.hbs