意外的标签名称“关闭”

Question

我不断收到以下代码的错误。我正在使用扩展基本模板的 Twig 文件。我得到的错误如下：

未声明纯文本文档的字符编码。如果文档包含 US-ASCII 范围之外的字符，则文档将在某些浏览器配置中呈现乱码。文件的字符编码需要在传输协议中声明或者文件需要使用字节序标记作为编码签名。

但是，在我使用 Java 的 pebble 编译器中，它给了我这个错误：

意外的标签名称“闭包”。

如果我完全取出封闭块，它就可以正常工作。所以我将问题单独隔离到闭包块。代码如下：

{% extends 'base' %}

{% block body %}

<!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> -->

<div id="xls-header">
  <div>
    <h4>Update Headers</h4>
  </div>
  <form method="get" action="/toolkit/header/update/add">
    <div id="header-data">
      <table>
        <tr>
          <th>VTable ID</th>
          <th>Table Type</th>
          <th>Table Name</th>
          <th>Edit</th>
        </tr>
        {% for header in headers %}
        <tr class="collapsible">
          <td>{{ header.vtableId }}</td>
          <td>{{ header.tableType }}</td>
          <td>{{ header.tableName }}</td>
          <td><a href="header/update/edit/{{ header.vtableId }}" target="_blank"><button class="command" type="button">Edit</button></a></td>
        </tr>
        <tr>
          <td class="content">hello</td>
        </tr>

        {% endfor %}
        <tr>

          <td>
            <!--TODO: Make this dynamic-->
            <select name="vTableId" type="number" class="large-7">
              <option value="14">EMI</option>
              <option value="15">Nutrition</option>
              <option value="21">Partner Product</option>
              <option value="22">Brick Attributes</option>
              <option value="23">Formatted Field</option>
              <option value="999">Component Field</option>
              <option value="1">PRODUCTMASTER</option>
              <option value="2">PACKAGING MARKED</option>
              <option value="3">PACKAGING UNMARKED</option>
              <option value="4">KITS LINKS</option>
              <option value="5">KITS ASSORTMENTS</option>
              <option value="6">UPPER LINKS</option>
              <option value="7">EPI GENERAL</option>
              <option value="8">EPI ECCC</option>
              <option value="12">KITS EXTENDED</option>
              <option value="16">UDF NON REPEATING</option>
              <option value="19">THIRD PARTY DATA</option>
              <option value="20">PRODUCT SCORE CARD DATA</option>
              <option value="24">compliancestatus</option>
              <option value="25">packagedeposit</option>
              <option value="26">brandattributes</option>
              <option value="27">unitindicators</option>
            </select>
          </td>
          <td>
            <select name="tableType">
              <option value="1">Flat Table</option>
              <option value="2">Multiplexed Table</option>
            </select>
          </td>
          <td><input name="name"></td>
          <td><button class="command">Add Header</button></td>
        </tr>
      </table>
    </div>
  </form>
</div>

<script>

{% closure %}

    new Vue({
        el: "#xls-header",
        delimiters: ['${', '}'],
        data: {
            status: ""
        },
        methods: {

            sendRequest(){
                this.status = 'SAVING';
            }

        }

    })

{% endclosure %}

</script>


{% endblock %}

这可能是一个愚蠢的错误，但我就是想不通。

Answer 1

这是两个不同的问题。您应该能够通过将以下内容添加到树枝模板的头部来修复丢失的字符编码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

至于 twig 中的闭包，我认为您不能那样做。见这篇文章： Executing closure on Twig