带有图标的按钮中的挖空绑定文本答案

【问题标题】：Knockout binding text in button with icon带有图标的按钮中的挖空绑定文本
【发布时间】：2022-11-28 22:42:08
【问题描述】：

在我的 HTML 页面中，我需要包含一个带有描述和图标的按钮元素（我使用来自 fontawesome.com 库的图标）。

为了编译我页面中的数据，我使用了 Knockout Javascript 框架。

按钮的描述性文本的编译是通过文本绑定完成的，如示例所示：

<button class="btn btn-sm btn-outline-secondary" data-bind="text:GetTranslatedText('SomeText')">
  <i class="fas fa-trash-alt"></i>
</button>

GetTranslatedText("SomeText") 函数返回翻译成用户使用的语言的文本。

我的问题是，当框架编译按钮的文本时，它会覆盖显示图标的 <i> 元素。

有没有一种简单的方法可以将图标的文本和 HTML 元素连接到绑定中？

谢谢！

【问题讨论】：

标签： html data-binding knockout.js

【解决方案1】：

与其将文本绑定到按钮（如您所见，它会覆盖按钮内容），不如将其绑定到图标旁边的范围：

<button class="btn btn-sm btn-outline-secondary">
  <i class="fas fa-trash-alt"></i> <span data-bind="text:GetTranslatedText('SomeText')"></span>
</button>

【讨论】：