如何解决如何通过 {{{ }}}模板助手将动作绑定到 ember 模板中的标记?
我正在构建一个带有 onclick 操作的标记字符串,如下所示。
helpInfoMarkup: computed('levelInfo.name',function() {
return '<a class="help-text" {{action "switchContext"}}' + get(this,'levelInfo.name') + '</a>';
}
我的 .hbs 文件
<div>{{{helpInfoMarkup}}}</div>
然而,这并不绑定到 ember 操作,只是作为标记的一部分出现并且不起作用?对此有何想法?
解决方法
这是行不通的,因为 glimmer 渲染引擎(由 ember 使用)不对字符串进行操作。 相反,您的 ember 模板在构建期间被编译为二进制格式,稍后在运行时 glimmer 将直接生成 DOM,而不是 HTML 字符串。
这意味着您永远不能将微光模板作为字符串传递。您可以将模板编译器与您的应用程序捆绑在一起(但您不应该)以在浏览器中编译模板,但即便如此,您也无法使用它来生成 HTML 字符串表示,因为在此步骤中您会丢失信息(例如动作绑定)。这是因为这些动作绑定从来都不是 HTML 的一部分,但 glimmer 在渲染期间直接将事件侦听器附加到 DOM 节点。通过使用 HTML 字符串和 {{{...}}}
,您可以呈现纯 HTML,而不是闪烁的模板,因此这将不起作用。
您应该做的是将所有 HTML 移动到模板中并使用一个组件来嵌入它。
唯一的另一种可能性是利用 did-insert
中的 ember-render-modifiers
手动附加事件。所以你可以这样做:
<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 操作。
,您可以删除 helpInfoMarkup
计算属性并将模板更新为
<div>
<a class="help-text" {{on "click" this.switchContext}}>{{this.levelInfo.name}}</a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。