_ undefined in ejs of Backbone/Express application

StackOverflow https://stackoverflow.com/questions/23187758

Pregunta

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.

¿Fue útil?

Solución

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top