Question

我有一个index.html文件，我使用Backbone.js从localhost获取列表，并将结果呈现为通过模板和Underscore.js查看到div类＆＃34; page＆＃34;使用模板脚本id＆＃34; project-table-summary＆＃34;。

当我运行程序时，我收到以下异常：

enter image description here

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../assets/ico/favicon.ico">

  <title>Template for Project</title>

  <!-- Custom styles for this template -->
  <link href="styles/bootstrap.min.css" rel="stylesheet">
  <link href="styles/sticky-footer.css" rel="stylesheet">
  <link href="styles/main.css" rel="stylesheet">

</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">

      <div class="page"></div>

      <!-- TEMPLATE -->
      <script type="text/template" id="project-table-summary">
        <% _.each(projects, function(project) { %>
          <h2 class="sub-header">hey render</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
              <tr>
                <th>Index</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Lorem</td>
                <td>ipsum</td>
                <td>dolor</td>
                <td>sit</td>
              </tr>
            </tbody>
          </table>
        </div>
        <% }) %>
      </script>

    </div>

    <!-- Begin page content -->
    <div class="footer">
      <div class="container">
        <p class="text-muted">my page</p>
      </div>
    </div>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/docs.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

  <script>
      $.ajaxPrefilter(function(options, originalOptions, jQXHR) {
        options.url = 'http://localhost:1230' + options.url;
      });

      var Projects = Backbone.Collection.extend({
        url:'/proj'
      });

      var ProjectView = Backbone.View.extend({
        el:$('.page'),
        render: function() {
          console.log('in render projectview');
          var that = this;
          var projects = new Projects();
          projects.fetch({
            success: function(projects) {
              var template = _.template($('#project-table-summary').html(), {projects: projects.models});
              that.$el.html(template);
            }
          });
        }
      });
      var projectView = new ProjectView();
      projectView.render();
    </script>
  </body>
</html>

在我看来，我正在正确导入脚本依赖项，并且在将内容发送到视图之前通过注销内容来验证我的Backbone.js提取操作是否有效。但是，肯定有一些错误，我认为这是一个错误的Underscore.js与Backbone.js的实现，我无法识别。如果你能确定发生了什么并给我一些线索，我将不胜感激。感谢。

Answer 1

该错误实际上看起来并非来自浏览器。堆栈跟踪中存在/Users/node_modules/ejs/lib/ejs.js和其他node.js和Express事件表明错误来自服务器。很多事情都使用<% ... %>作为模板，也许你的服务器端代码就是其中之一，而且错误实际上来自你的服务器。

找出（并可能解决问题）的一种快速简便的方法是更改模板分隔符。您可以use different regexes with Underscore设置_.templateSettings值：

如果ERB样式的分隔符不是您的茶，您可以更改Underscore的模板设置以使用不同的符号来设置插值代码。定义插值正则表达式以匹配应逐字插值的表达式，转义正则表达式以匹配应在HTML转义后插入的表达式，以及评估正则表达式匹配应该在不插入结果字符串的情况下进行评估的表达式。

因此，您可以将其添加到客户端代码中：

_.templateSettings = {
    evaluate    : /\{\{([\s\S]+?)\}\}/g,
    interpolate : /\{\{=([\s\S]+?)\}\}/g,
    escape      : /\{\{-([\s\S]+?)\}\}/g
};

然后在模板中使用{{ ... }}，{{= ... }}和{{- ... }}来获取Handlebar-ish模板。请务必定义所有三个正则表达式和make sure they don't overlap in unexpected ways。

_在Backbone / Express应用程序的ejs中未定义

1 个答案: