HTML 文件中的“_ 未定义”下划线错误答案

【问题标题】："_ is not defined" Underscore error in HTML fileHTML 文件中的“_ 未定义”下划线错误
【发布时间】：2013-07-03 21:34:12
【问题描述】：

这个来自 node.js 项目的 html 文件，它最初是来自 jedireza 的 Drywall.js 项目的玉注册文件。它在 GitHub 上的位置是： https://github.com/jedireza/drywall/blob/master/public/views/signup/index.js

通过jade内部的转换器转换后，使用ejs模板引擎渲染，出现如下错误：

_ 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)

HTML文件如下：

<!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">&times;</button><%= err %></div><% }); %>
            </div><div class="control-group &lt;%= errfor.username ? &quot;error&quot; : &quot;&quot; %&gt;"><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 &lt;%= errfor.email ? &quot;error&quot; : &quot;&quot; %&gt;"><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 &lt;%= errfor.password ? &quot;error&quot; : &quot;&quot; %&gt;"><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">&#169;  </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>

粗斜体的行是触发错误的行。 underscore.js 文件已包含在内。感谢您的任何建议和帮助！

【问题讨论】：

这不是 HTML 错误，而是 JavaScript 错误。
我相信你需要在一个框架中链接代码才能工作
看起来 Jade 仍在转义您的一些模板标记。我不确定这是否是导致它的原因，但可能是。

标签： javascript node.js backbone.js underscore.js ejs

【解决方案1】：

从http://underscorejs.org添加下划线.js。

这确实是js错误。

【讨论】：

原贴的代码没有引用underscore.js，所以当时是正确的。

【解决方案2】：

据我所知，脚本标签中不会解析任何内容。您可能需要执行以下操作：

| <script type="text/template" id="tmpl-signup">
form.form-horizontal
  .alerts
    |<% _.each(errors, function(err) { %>
    p foo
    |<% }); %>
| </script>

你的 Jade 似乎还在转义几行：

span.help-inline <%= errfor.username %>
...
span.help-inline <%= errfor.email %>
...
span.help-inline <%= errfor.password %>

应该是

span.help-inline!= "<%= errfor.username %>"
...
span.help-inline!= "<%= errfor.email %>"
...
span.help-inline!= "<%= errfor.password %>"

非转义 HTML：!=

感叹号后跟一个或两个等号字符计算 Scala 代码就像 equals 一样，但从不清理 HTML。当 TemplateEngine.escapeMarkup 选项设置为 false 时，= 的行为等同于!=。但是，如果 TemplateEngine.escapeMarkup 选项设置为 true，= 将清理 HTML，但 != 仍然不会。

http://scalate.fusesource.org/documentation/jade-syntax.html#unescaping_html

【讨论】：