如何在评论长度超80字符时添加Read More按钮（Aurelia）

你遇到的核心问题是Aurelia的${}文本插值会自动转义HTML，直接在插值里写按钮标签会被当成纯文本显示。这里有两种靠谱的解决方法：

方案一：拆分DOM结构，用条件渲染按钮 #

这是最推荐的方式，结构清晰，无需处理HTML字符串，也能精准控制按钮的显示时机：

<tr repeat.for="m of comments">
  <td if.bind="showLess">
    ${m.comment.length < 80 ? m.comment : m.comment.substr(0, 80) + ' ...'}
    <button if.bind="m.comment.length >= 80">Read More</button>
  </td>
</tr>

原理很简单：把按钮单独作为一个DOM元素，用if.bind="m.comment.length >= 80"做判断，只有当评论长度超过80字符时才渲染按钮，完美避免短评论显示按钮的问题。

方案二：使用innerhtml.bind解析HTML字符串 #

如果一定要在逻辑内统一处理内容和按钮，可以通过ViewModel方法生成包含HTML的字符串，再用innerhtml.bind绑定（注意：若评论内容为用户输入，需做好XSS防护）：

视图代码： #

<tr repeat.for="m of comments">
  <td if.bind="showLess" innerhtml.bind="getTruncatedComment(m)"></td>
</tr>

视图模型（ViewModel）代码： #

getTruncatedComment(commentItem) {
  const comment = commentItem.comment;
  if (comment.length < 80) {
    return comment;
  }
  return `${comment.substr(0, 80)} ... <button>Read More</button>`;
}

innerhtml.bind会直接解析绑定的字符串为HTML，按钮会被正确渲染成可点击元素，而非文本。

内容的提问来源于stack exchange，提问作者deanpillow