javascript - 预编译模板中的 HandlebarsJS 空白

Question

我正在迁移我的一个项目以使用 HandlebarsJS 模板而不是下划线模板，我遇到了一个非常奇怪的问题。

我正在使用预编译模板，并且在我将呈现的模板附加到 DOM 的任何地方我都附加了一个空文本元素，这导致了布局问题，并用间隙渲染代替了它们

查看 chrome 开发控制台会显示以下附加到 div 的 3 个模板的标记:

> <div>
      ""
      <div><!--content --></div>
      ""
      <div><!--content --></div>
      ""
      <div><!--content --></div>
  </div>

当将父 div HTML 转储到 javascript 控制台时，根本没有任何空格，它只是:

<div><!--content --></div><div><!--content --></div><div><!--content --></div>

Answer 1

好的，现在已经解决了，根据对原始问题的评论，问题是在预编译期间添加的\ufeff 字符，我的 IDE 和开发人员浏览器扩展不显示该字符，即使有可见的空白选项启用。

为了解决这个问题，我更新了我的模板，将代码附加到

$container.append(template({ *data* }).replace(/\ufeff/, ''));