this html file from a node.js project which was originally a jade signup file from the Drywall.js project by jedireza. Its location on GitHub is: https://github.com/jedireza/drywall/blob/master/public/views/signup/index.js
After converting this through jade's internal converter and using the ejs template engine to render it, it came up with the following error:
_ is not defined
at eval (eval at <anonymous> (/var/lib/stickshift/51cee2af5973cad1b20002b5/app-root/data/543117/node_modules/ejs/lib/ejs.js:236:14))
at eval (eval at <anonymous> (/var/lib/stickshift/51cee2af5973cad1b20002b5/app-root/data/543117/node_modules/ejs/lib/ejs.js:236:14))
at exports.compile (/var/lib/stickshift/51cee2af5973cad1b20002b5/app-root/data/543117/node_modules/ejs/lib/ejs.js:249:15)
at Object.exports.render (/var/lib/stickshift/51cee2af5973cad1b20002b5/app-root/data/543117/node_modules/ejs/lib/ejs.js:287:13)
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/layouts/utility.css">
<link rel="stylesheet" href="/layouts/default.css">
<script src="/vendor/jquery/jquery-1.9.1.min.js"></script>
<script src="/vendor/underscore/underscore-min.js"></script>
<script src="/vendor/backbone/backbone-min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/layouts/utility.js"></script>
<script src="/views/signup/index.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="/" class="brand"><img src="/media/logo-black.png" width="150"></a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/signup/">Sign Up</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="/login/"><i class="icon-user"></i> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page">
<div class="container">
<div class="page-header">
<h1>Sign Up</h1>
</div>
<div id="signup"></div>
<script type="text/template" id="tmpl-signup"><form class="form-horizontal"><div class="alerts">
***<% _.each(errors, function(err)*** { %><div class="alert alert-error"><button type="button" data-dismiss="alert" class="close">×</button><%= err %></div><% }); %>
</div><div class="control-group <%= errfor.username ? "error" : "" %>"><label class="control-label">Pick a Username:</label><div class="controls"><input type="text" name="username" value="<%= username %>"><span class="help-inline"><%= errfor.username %></span></div></div><div class="control-group <%= errfor.email ? "error" : "" %>"><label class="control-label">Enter Your Email:</label><div class="controls"><input type="text" name="email" value="<%= email %>"><span class="help-inline"><%= errfor.email %></span></div></div><div class="control-group <%= errfor.password ? "error" : "" %>"><label class="control-label">Create a Password:</label><div class="controls"><input type="password" name="password" value="<%= password %>"><span class="help-inline"><%= errfor.password %></span></div></div><div class="form-actions"><button type="button" class="btn btn-primary btn-signup">Create My Account</button></div></form></script>
</div>
</div>
<div class="footer">
<div class="container">
<div class="inner">
<span class="copyright pull-right">© </span>
<ul class="links">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/signup/">Sign Up</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="ajax-spinner"><img src="/media/ajax-pulse.gif"></div>
</body>
</html>
The line that is bold and italicized is the line that triggers the error. The underscore.js file is already included. Thanks for any advice and help!
Add underscore.js from http://underscorejs.org.
This is indeed js error.
From what I can tell, nothing will be parsed within the script tag. You might have to do something like this:
| <script type="text/template" id="tmpl-signup">
form.form-horizontal
.alerts
|<% _.each(errors, function(err) { %>
p foo
|<% }); %>
| </script>
It also appears as though you Jade is still escaping a few lines:
span.help-inline <%= errfor.username %>
...
span.help-inline <%= errfor.email %>
...
span.help-inline <%= errfor.password %>
Should be
span.help-inline!= "<%= errfor.username %>"
...
span.help-inline!= "<%= errfor.email %>"
...
span.help-inline!= "<%= errfor.password %>"
Unescaping HTML: !=
An exclamation mark followed by one or two equals characters evaluates Scala code just like the equals would, but never sanitizes the HTML. When the TemplateEngine.escapeMarkup option is set to false, = behaves identically to !=. However, if the TemplateEngine.escapeMarkup option is set to true, = will sanitize the HTML, but != still won't.
http://scalate.fusesource.org/documentation/jade-syntax.html#unescaping_html