Unexpected tag name "closure"

Question

I keep getting an error for the following bit of code. I am using a Twig file which extends a base template. The error I get is the following:

The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.

However, in the pebble compiler that I have in Java, it gives me this error:

Unexpected tag name "closure".

If I take out the closure block completely it works fine. So I have isolated the problem to the closure block alone. Here is the code:

{% 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 %}

It's probably a stupid mistake but I just can't figure it out.

What do you expect `{% closure %}` to do? Where is it documented? I can't find it in the pebble manual. — Quentin, Aug 14 '19 at 14:51

score 0 · Answer 1 · answered Aug 14 '19 at 14:55

0

These are two separate issues. You should be able to fix the missing character encoding by adding the following to the head of your twig template:

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

As for closures in twig, I don't think you can do it that way. See this article: Executing closure on Twig

answered Aug 14 '19 at 14:55

Tyler Youngblood

2,710
3
18
24

Alright, that worked and you're right I can't use the closure tags like that. Thanks! – c.s_._._ Aug 14 '19 at 15:01
1

@ChristienSoosaipillai would you mind marking my answer as the correct answer? It's how you and I both earn points (for reputation). I see that you're new to StackOverflow, so you might not have realized how rep works. You can see your own reputation here: https://stackoverflow.com/users/9816524/christien-soosaipillai – Tyler Youngblood Aug 14 '19 at 16:11

Unexpected tag name "closure"

1 Answers1