如何格式化玉表格?

我试图重构我的应用程序使用玉而不是ejs,但遇到一些问题设置login表单。

这是我在ejs的原始forms:

<% if (message) { %> <p><%= message %></p> <% } %> <form class="form-horizontal" action='/login' method="POST" id="loginForm"> <fieldset> <div id="legend"> <legend class="">Login</legend> </div> <div class="control-group"> <!-- Username --> <label class="control-label" for="username">Username</label> <div class="controls"> <input type="text" id="username" name="username" placeholder="" class="input-xlarge"> </div> </div> <div class="control-group"> <!-- Password--> <label class="control-label" for="password">Password</label> <div class="controls"> <input type="password" id="password" name="password" placeholder="" class="input-xlarge"> </div> </div> <div class="control-group"> <!-- session--> <label class="control-label" for="rememberme">Remember Me</label> <div class="controls"> <input type="checkbox" name="rememberme"/> </div> </div> <div class="control-group"> <!-- Button --> <div class="controls"> <button class="btn btn-success">Login</button> </div> </div> </fieldset> </form> 

这是我在玉的新forms:

 extends layout block content if message p= message form(class='form-horizontal',action='/login',method='POST',id='loginForm') fieldset div#legand legend Login div.control-group label(for='username',class='control-label') Username div.controls input(type='text',id='username',name='username',placeholder='Username',class='input-xlarge') div.control-group label(for='password',class='control-label') Password div.controls input(type='text',id='password',name='password',placeholder='Password',class='input-xlarge') div.control-group label(for='rememberme',class='control-label') Remember Me div.controls input(type='checkbox',name='rememberme') div.control-group div.controls input(type='submit',class='btn btn-success') Login 

Codekit正在抛出一个错误:

 /Applications/CodeKit.app/Contents/Resources/engines/jade/lib/runtime.js:173 throw err; ^ Error: /Users/sm/Documents/Projects/Web_Applications/App/app/views/login.jade:27 25| 26| > 27| Invalid indentation, you can use tabs or spaces but not both at Object.Lexer.indent (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:672:15) at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:770:15) at Object.Lexer.blank (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:179:19) at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:744:15) at Object.Lexer.blank (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:179:19) at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:744:15) at Object.Lexer.lookahead (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:106:46) at Object.Parser.lookahead (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:115:23) at Object.Parser.peek (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:92:17) at Object.Parser.tag (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:666:30) 

我怎样才能通过这个缩进错误,让这个表单工作? 我只使用标签,没有空格,所以我不明白是什么问题。

这可能是由于您的Jade模板中的后续空行(您不会发布,但根据错误消息存在)中的空格所导致的。

我认为你的问题可能是你如何指定button。 代替:

  div.control-group div.controls input(type='submit',class='btn btn-success') Login