CODEWITHSUNDEEP
backbone.jsunderscore.js
Matt Hintzke
Matt Hintzke

Reputation: 8004

Underscore/Backbone: '_ is undefined'

Here is my 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>
        <!-- My Javscript -->
    </body>
</html>

The only important part is the underscore template is not working. It is saying that the '_' on the line: _.each(items, function(item) is undefined. Why is this happening? I tried moving the underscore script include to the top of the page and that didn't help.

Upvotes: 1

Views: 579

Answers (1)

icktoofay
icktoofay

Reputation: 129139

I was unable to reproduce the "_ is not defined" issue, but I did find another issue that you may be running into: You're referencing the items as the variable items, but you never told _.template you want the data to be in items. Use an object literal as the data:

_.template($('#skillsTemplate').html(), {
    items: [{ name:"Linux", value:"Test" }]
})

(Also, you're using item.get('name') when the data is a plain object rather than an Underscore model, but I assume that was just a remnant from your original code after you simplified your code for the question.)

Upvotes: 2

Related Questions