解析 Handlebars 数据时，javascript <script> 标签是否有效？答案

【问题标题】：Are javascript <script> tags efficient when parsing through Handlebars data?解析 Handlebars 数据时，javascript <script> 标签是否有效？
【发布时间】：2022-08-03 11:29:43
【问题描述】：

我实际上是在我的后端 server.js 中的数据库中选择 *，并将其传递给试图将数据解析到表中的把手文件。 hbs 文件如下所示：

        <table>
            <tr>
                <th>username</th>
                <th>password (encrypted)</th>
                <th>write privileges</th>
                <th>admin privileges</th>
                <th>modify</th>
                <th>delete</th>
            </tr>
            {{#each user}}
            <tr>
                <td>{{ this.user }}</td>
                <td>{{ this.password }}</td>
                <td><script type=\"text/javascript\"> if ({{ this.p_write }} == 1) { document.write(\'<i class=\"ti ti-check safe\"></i>\'); }</script></td>
                <td><script type=\"text/javascript\"> if ({{ this.p_admin }} == 1) { document.write(\'<i class=\"ti ti-check safe\"></i>\'); }</script></td>
                <td><a href=\"#\" class=\"warning\"><i class=\"ti ti-edit\"></i></td>
                <td><a href=\"#\" class=\"danger\"><i class=\"ti ti-circle-minus\"></i></a></td>
            </tr>
            {{/each  }}
        </table>

上面代码的输出也可以在下面看到：

我想知道我用来检查this.p_admin 和this.p_write 的值的<script> 标签是否特别有效，如果有在我的情况下更好的方法来做到这一点。我对此很陌生，所以可能有一个明显的解决方案不会出现在我身上。谢谢。

“强烈反对”使用document.write()。请参阅：developer.mozilla.org/en-US/docs/Web/API/Document/write。您应该能够完全在 Handlebars 中实现您的目标。例如：{{#if this.p_write}}<i class=\"ti ti-check safe\"></i>{{/if}}

标签： javascript node.js express handlebars.js express-handlebars

【解决方案1】：

如 cmets 中所述，使用 Handlebars if 条件而不是 document.write。这是一个可运行的示例，您可以适应您的用例（<table> 是相关部分）：

const users = [
  {user: "foo", password: "bar", p_write: false, p_admin: true},
  {user: "baz", password: "baz", p_write: true, p_admin: false},
  {user: "quux", password: "quux", p_write: false, p_admin: true},
];
const html = document.querySelector("#template").innerHTML;
const template = Handlebars.compile(html);
document.body.innerHTML = template({users});

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 0.3em;
}

<script id="template" type="text/x-handlebars-template">
  <table>
    <tr>
      <th>username</th>
      <th>password (encrypted)</th>
      <th>write privileges</th>
      <th>admin privileges</th>
      <th>modify</th>
      <th>delete</th>
    </tr>
    {{#each users}}
    <tr>
      <td>{{user}}</td>
      <td>{{password}}</td>
      <td>
        {{#if p_write}}
          <i class="ti ti-check safe">test</i>
        {{/if}}
      </td>
      <td>
        {{#if p_admin}}
          <i class="ti ti-check safe">test</i>
        {{/if}}
      </td>
      <td>
        <a href="#" class="warning">
          <i class="ti ti-edit">test</i>
        </a>
      </td>
      <td>
        <a href="#" class="danger">
          <i class="ti ti-circle-minus">test</i>
        </a>
      </td>
    </tr>
    {{/each}}
  </table>
</script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

【讨论】：