backbone.js - Underscore/Backbone: '_ is undefined' -
here code:
<!doctype html> <html> <head> <title>matt's template</title> <!-- stylesheets --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" /> <link rel="stylesheet" href="../stylesheets/general.css" type="text/css" /> <style type="text/css"> .dragndrop { position:relative; margin:30px auto; border:4px dashed #000; border-radius: 25px; padding:50px; text-align: center; } table{ width:100%; } tr{ width:100%; } td, th { padding:10px; border:1px solid #000; width:50%; text-align: center; } </style> </head> <body> <section class="container"> <!--<form action="/file-upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" /> </form>--> <form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form> <section id="skills"> </section> <script type="text/template" id="skillstemplate"> <section> <table> <tr> <th>skill</th> <th>value</th> </tr> <% _.each(items, function(item){ %> <tr> <td><%= item.get('name') %></td> <td><%= item.get('value') %></td> </tr> <% }); %> <tr> <td><button id="newskill">new</button></td> </tr> </table> </section> </script> </section> <!-- javascript libraries --> <script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script> <script type="text/javascript"> skillsview = backbone.view.extend({ render : function(){ var template = _.template($('#skillstemplate').html(), [{ name:"linux", value:"test"}]); this.$el.html(template); } }); var skillsview = new skillsview({el : $('#skills') }); skillsview.render(); </script> <!-- javscript --> </body> </html>
the important part underscore template not working. saying '_' on line: _.each(items, function(item)
undefined. why happening? tried moving underscore script include top of page , didn't help.
i unable reproduce "_
not defined" issue, did find issue may running into: you're referencing items variable items
, never told _.template
want data in items
. use object literal data:
_.template($('#skillstemplate').html(), { items: [{ name:"linux", value:"test" }] })
(also, you're using item.get('name')
when data plain object rather underscore model, assume remnant original code after simplified code question.)
Comments
Post a Comment