jade-rails遇到正常就抛错HTML

Question

index.html.erb.jade 在我的 Rails 应用程序中看起来像：

<p id="notice"><%= notice %></p>

<h1>0.9 beta</h1>

.row
  .column.small-4
    Text1
  .column.small-8
    Text2


<div class="flexcontainer">
  <div class="button"><%= button_to 'Provision eingeben', new_provision_path, class: 'button success radius large' %></div>
  <div class="button"><%= button_to 'Ergebnis berechnen', 'provisions/results', method: :post, class: 'button success radius large' %></div>
  <div class="button"><%= button_to 'Alle Einträge löschen', 'provisions/clearAll', method: :post, data: { confirm: 'Sind Sie sicher?' },class: 'button alert radius large' %></div>
</div>
<div class="space"></div>

<table>
  <thead>
    <tr>
      <th>Versicherung</th>
      <th>Betrag</th>
      <th>Teilhaber</th>

并且在构建时给我以下错误：

/usr/local/lib/node_modules/jade/lib/runtime.js:240
  throw err;
        ^
Error: /home/marc/Projects/provisionen2/app/views/provisions/index.html.erb.jade:13
    11| 
    12| <div class="flexcontainer">
  > 13|   <div class="button"><%= button_to 'Provision eingeben', new_provision_path, class: 'button success radius large' %></div>
    14|   <div class="button"><%= button_to 'Ergebnis berechnen', 'provisions/results', method: :post, class: 'button success radius large' %></div>
    15|   <div class="button"><%= button_to 'Alle Einträge löschen', 'provisions/clearAll', method: :post, data: { confirm: 'Sind Sie sicher?' },class: 'button alert radius large' %></div>
    16| </div>

unexpected token "indent"
    at Parser.parseExpr (/usr/local/lib/node_modules/jade/lib/parser.js:254:15)
    at Parser.parse (/usr/local/lib/node_modules/jade/lib/parser.js:122:25)
    at parse (/usr/local/lib/node_modules/jade/lib/index.js:104:21)
    at Object.exports.compile (/usr/local/lib/node_modules/jade/lib/index.js:205:16)
    at handleTemplateCache (/usr/local/lib/node_modules/jade/lib/index.js:174:25)
    at Object.exports.compileFile (/usr/local/lib/node_modules/jade/lib/index.js:309:10)
    at renderFile (/usr/local/lib/node_modules/jade/bin/jade.js:237:19)
    at fs.watchFile.persistent (/usr/local/lib/node_modules/jade/bin/jade.js:136:5)
    at Array.forEach (native)
    at Object.<anonymous> (/usr/local/lib/node_modules/jade/bin/jade.js:135:9)
[Finished in 2.2s with exit code 8]
[cmd: ['jade', '/home/marc/Projects/provisionen2/app/views/provisions/index.html.erb.jade', '--pretty']]
[dir: /home/marc/Projects/provisionen2/app/views/provisions]
[path: /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/marc/.rvm/bin]

很明显它不喜欢 child div 的缩进。当我不缩进有问题的 div 时，错误会转到后续的 div ... 知道这是为什么吗？

Answer 1

您正在直接将 html 嵌入到 Jade 中。要嵌入纯文本块或 html 使用 .(DOT) 语法。参见 reference。

<p id="notice"><%= notice %></p>

<h1>0.9 beta</h1>

.row
  .column.small-4
    Text1
  .column.small-8
    Text2

div.
  <div class="flexcontainer">
    <div class="button"><%= button_to 'Provision eingeben', new_provision_path, class: 'button success radius large' %></div>
    <div class="button"><%= button_to 'Ergebnis berechnen', 'provisions/results', method: :post, class: 'button success radius large' %></div>
    <div class="button"><%= button_to 'Alle Einträge löschen', 'provisions/clearAll', method: :post, data: { confirm: 'Sind Sie sicher?' },class: 'button alert radius large' %></div>
  </div>
  <div class="space"></div>

jade-rails遇到正常就抛错HTML

jade-rails throwing error when encountering normal HTML

ruby-on-rails

node.js

ruby-on-rails-4

pug