Escape double braces {{ }} in Mustache template


mutache logo

In case you use template in template , example: server Nodejs uses Mustache, client uses Handlebars

HTML:

...
<script type="text/xtmpl" id="mytmpl">  
    <tr data-id="{{id}}">
      <td>{{num}}</td> 
      <td>
        <h4 class="widget-table-title">{{name}}</h4>
        <strong data-phone="{{phone}}">{{cut phone}}**** - {{mobile}}</strong>
        <p class="widget-table-desc m-b-15">
        {{detail}}
        </p>          
      </td>
      <td>{{date time}}</td> 
      <td>{{count}}</td>
       
      <td>
        <a href="#" class="btn btn-inverse btn-sm width-80 rounded-corner class-call">Call</a>
        <a href="#" class="btn btn-sm btn-default mymodal">Detail</a>
      </td>
    </tr>
    <tr data-id="detail-{{id}}" style="display:none;">
        <td colspan="5">
            <p>{{gr_detail}}</p>
            <table class="table table-bordered widget-table widget-table-rounded table-detail">
              <thead>
                <tr>
                  <th width="1%"></th>    
                  <th>Name</th>
                  <th>Note</th>
                  <th>Price</th> 
                  <th>No</th>       
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                {{#each products}}
                <tr data-id="pr-{{id}}">
                  <td>{{id}}</td> 
                  <td>
                    {{name}}
                  </td>
                  <td>
                    <input value="" />
                  </td>
                  <td><input class="class-price" value="{{price}}" /></td> 
                  <td>
                    <input class="class-no" value="{{qty}}" />
                  </td>
                   
                  <td>
                    <input class="class-total" value="{{total}}" />
                  </td>
                </tr>
                {{/each}}
                <tr data-id="pr-0">
                  <td></td> 
                  <td>
                    SHIP
                  </td>
                  <td>
                    
                  </td>
                  <td></td> 
                  <td>
                    
                  </td>
                   
                  <td>
                    <input class="class-ship" value="{{ship}}" />
                  </td>
                </tr>
                <tr data-id="pr-0">
                  <td></td> 
                  <td>
                    
                  </td>
                  <td>
                    
                  </td>
                  <td></td> 
                  <td>
                    Total
                  </td>
                   
                  <td>
                    <input class="class-sum" value="{{sum}}" />
                  </td>
                </tr>
                <tr data-id="pr-0">
                  <td colspan=6> 
                    <input style="width: 100%;" class="class-address" value="{{address}}" placeholder="Address" />
                  </td>
                </tr>
                <tr data-id="pr-0">
                  <td colspan=6> 
                    <input style="width: 100%;" class="class-note" value="{{note}}" placeholder="Note" />
                  </td>
                </tr>
              </tbody>
            </table>
            <p>
            <a href="#" class="btn btn-inverse btn-sm width-80 rounded-corner class-done">Done</a>
            <a href="#" class="btn btn-inverse btn-sm width-80 rounded-corner class-cancel">Cancel</a>
            </p>
        </td>
    </tr>
</script>
...

You will get error like:

[ExceptionsHandler] Unclosed section "each products" at 4805 +596773ms
Error: Unclosed section "each products" at 4805

Solution: You can switch delimiters , example

...
{{=<% %>=}}
<script type="text/xtmpl" id="mytmpl">  
...
</script>
<%={{ }}=%>
...

Leave a Reply