如何通過 {{{ }}}（模板助手）將操作綁定到 ember 模板中的標記？

Question

我正在構建一個帶有 onclick 操作的標記字符串，如下所示。

    helpInfoMarkup: computed('levelInfo.name', function() {
       return '<a class="help-text" {{action "switchContext"}}' + get(this, 'levelInfo.name') + '</a>';
    }

我的.hbs 文件

<div>{{{helpInfoMarkup}}}</div>

但是，這不綁定到 ember 操作，只是作為標記的一部分出現並且不起作用？ 對此有什么想法嗎？

Answer 1

這不起作用，因為微光渲染引擎（由 ember 使用）不對字符串進行操作。 相反，您的 ember 模板在構建期間被編譯為二進制格式，稍后在運行時 glimmer 將直接生成 DOM，而不是 HTML 字符串。

這意味着您永遠不能將微光模板作為字符串傳遞。 您可以將模板編譯器與您的應用程序捆綁在一起（但您不應該）以在瀏覽器中編譯模板，但即便如此您也不能使用它來生成 HTML 字符串表示，因為在此步驟中您會丟失信息（例如動作綁定） . 這是因為這些動作綁定從來都不是 HTML 的一部分，而是在渲染期間直接將事件偵聽器附加到 DOM 節點。 通過使用 HTML 字符串和{{{...}}} ，您可以渲染普通的 HTML，而不是微光模板，所以這不會起作用。

您應該做的是將所有 HTML 移動到模板並使用組件嵌入它。

唯一的另一種可能性是利用ember-render-modifiers中的did-insert手動附加事件。 所以你可以這樣做：

<div {{did-insert this.attachSwitchContextAction}}>{{{helpInfoMarkup}}}</div>

然后在您的組件中：

@action
switchContext() {
}

@action
attachSwitchContextAction(elem) {
  elem.addEventListener('click', (...args) => this.switchContext(...args));
}

get helpInfoMarkup() {
  return '<a class="help-text" ' + get(this, 'levelInfo.name') + '</a>';
}

通過這種方式，您可以完全繞過 Glimmer 模板引擎並退回到手動 DOM 操作。

Answer 2

您可以刪除helpInfoMarkup計算屬性並將模板更新為

<div>
  <a class="help-text" {{on "click" this.switchContext}}>{{this.levelInfo.name}}</a>
</div>