如何在組件中呈現動態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（可能的做法）存在安全風險。 我建議您提出一個新的問題，關於如何做自己想做的事情，而不要着眼於解決問題的特定方法。