CODEWITHSUNDEEP
dombackbone.js
Oscar Gallo
Oscar Gallo

Reputation: 17

Backbone: el: $ is not defined

So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container') Here is my code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Backbone Project</title>

         <script src="lib/underscore.js" type="text/javascript"></script>
         <script src="lib/backbone.js" type="text/javascript"></script>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>

        <script type="text/template" id="task_template">
            <label>Task: </label>
            <input type="text" id="task_desc"/>
            <input type="button" value="Add Task" id="btn"/>
        </script>

        <div id="container"></div>

        <script type="text/javascript">

            Task = Backbone.View.extend({
                el : $('#container'),

                initialize: function(){
                    this.render();
                },

                render: function(){
                    var template = _.template($('#task_template').html(), {});
                    this.$el.html(template);
                }
            });

            var task = new Task();

        </script>
    </body>
</html>

Upvotes: 0

Views: 1142

Answers (1)

Billy Moon
Billy Moon

Reputation: 58521

The example is using jQuery to select DOM elements, add the library to your head...

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>

<!-- ... time passes ... -->

<script type="text/javascript">

    // use jQuery onReady wrapper to ensure DOM has loaded before
    // executing JS that might depend on DOM elements, and scripts to exist
    $(function(){

        Task = Backbone.View.extend({
            el : $('#container'),

            initialize: function(){
                this.render();
            },

            render: function(){
                var template = _.template($('#task_template').html(), {});
                this.$el.html(template);
            }
        });

        var task = new Task();

    });

</script>

Upvotes: 1

Related Questions