How to spell correctly Django's for statement in pug.js' template?

871 Views Asked by At

When I try to compile this:

doctype html
html(lang="en")
  head
    meta(http-equiv = "Content-Type " content ="text/html ;charset=utf-8")
    title = category.name
  body
    h1 Сьпiс таварау
    h2 Катэгорыi:
    ul
       for cat in cats 
        li: a(href='/goods/{{cat.id}}/') {{cat.name}}
      endfor
    h2 Тавары
    table
      tr
        th Назва
        th Есьць у наяунасьцi
      for good in goods
        tr
          td a(href = '/goods/good/{{good.id}}/'){{good.name}}
      endfor            

I get this error:

Error: index.pug:10:7
    8|     h2 Катэгорыi:
    9|     ul
  > 10|       {% for cat in cats %}
--------------^
    11|         li: a(href='/goods/{{cat.id}}/') {{cat.name}}
    12|       endfor
    13|     h2 Тавары

unexpected text "{% fo"
    at makeError (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-error/index.js:32:13)
    at Lexer.error (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:58:15)
    at Lexer.fail (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:1304:10)
    at Lexer.advance (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:1364:15)
    at Lexer.callLexerFunction (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:1319:23)
    at Lexer.getTokens (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:1375:12)
    at lex (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-lexer/index.js:12:42)
    at Object.lex (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug/lib/index.js:99:27)
    at Function.loadString [as string] (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug-load/index.js:44:24)
    at compileBody (/home/ivan/Documents/node-v6.11.0-linux-x64/lib/node_modules/pug-cli/node_modules/pug/lib/index.js:86:18)

Initially I thought that this for cat in cats will normally compile into {% for cat in cats %} , like it does with if statement, but it seems like pug.js requires some more special syntax, which I couldn't find on pugjs.org, though here the syntax presented on Pugjs official website is similar to mine:

for a in b
  = a
2

There are 2 best solutions below

1
On

SO this is just a sugestion but just make sure all your django tags a read as plain text by adding the | character

I've been experimenting with prototyping frontends in simple pug too, and then using the output for my templates, and this seems to work

I am yet to try pypugjs but it seems the original repo has been deleted by the guy who orginally forked it from pyjade.

0
On

There are multiple errors in this template. Here is the correct version:

doctype html
html(lang="en")
  head
    meta(http-equiv="Content-Type", content="text/html ;charset=utf-8")
    title= category.name
  body
    h1 Сьпiс таварау
    h2 Катэгорыi:
    ul
      for cat in cats
        li: a(href='/goods/{{ cat.id }}/') {{ cat.name }}
    h2 Тавары
    table
      tr
        th Назва
        th Есьць у наяунасьцi
      for good in goods
        tr
          td
            a(href='/goods/good/{{good.id }}/') {{ good.name }}

Notice that there are no closing tags in the pug syntax and thats why i like it! :) Also notice the title= instead of having a space in between, which is breaking it. Also parameters inside () have to be separated by a comma.