_ undefined in ejs of Backbone/Express application

Question

I have a index.html file that I am using Backbone.js to fetch a list from localhost, and render the results to view via template and Underscore.js to div class "page" using template script id "project-table-summary".

When I run the program I receive the following exception:

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>

It looks to me I am importing script dependencies correct, and my Backbone.js fetch operation does work as verified by logging out the contents prior to sending the content to view. However, there is something definitely wrong, and I think it is a faulty implementation of Underscore.js with Backbone.js that I could not identify. I would appreciate if you can identify what is going on and give me a clue about it. Thanks.

Then why is `/Users/node_modules/ejs/lib/ejs.js` doing the complaining? That whole stack trace looks like node.js and Express stuff to me. What happens if you change the client-side template delimiters to something other than `<%...%>` using `_.templateSettings` and then change the template as well? I think your server code is trying to interpret the `<% ... %>` stuff and your server is complaining that it doesn't have `_` defined. — mu is too short, Apr 20 '14 at 23:28
Yes, you are right. Express is not recognizing underscore, and I am in the process of figuring out how to address that precisely. It makes sense since the html is first rendered by Express. — aug2uag, Apr 20 '14 at 23:33
@muistooshort would you please add the solution that is a server side error, and I will happily accept. Thank you — aug2uag, Apr 20 '14 at 23:55

score 1 · Accepted Answer · edited May 23 '17 at 12:05

That error really doesn't look like it came from a browser. The presence of /Users/node_modules/ejs/lib/ejs.js and other node.js and Express things in the stack trace suggests that the errors are coming from the server. A lot of things use <% ... %> for templates, perhaps your server-side code is one of those things and the error is actually coming from your server.

A quick and easy way to find out (and possibly solve the problem) would be to change the template delimiters. You can use different regexes with Underscore by setting _.templateSettings values:

If ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string.

So you could add this to your client-side code:

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

and then use {{ ... }}, {{= ... }}, and {{- ... }} in your template to get Handlebar-ish templates. Be sure to define all three regexes and make sure they don't overlap in unexpected ways.

Thank you for the thoughtful and thorough explanation. Much appreciated. — aug2uag, Apr 21 '14 at 00:13

_ undefined in ejs of Backbone/Express application

1 Answers1