Search code examples
backbone.js

Backbone.js error "Backbone.View.Extend is not a function"

hi below is the code that i have written, it's tutorial example from the internet (https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view/)

<<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
</head>

<body>
    <div id ="search_container">a</div>
    <script type="text/template" id="search_template">
        <label>Search</label>
        <input type="text" id='search_input' />
        <input type="button" id="search_button" value="search" />
    </script>

    <script type="text/javascript">
        SearchView = Backbone.View.Extend({
            initialize: function(){
                this.render();
            },
            render: function(){
                 // Compile the template using underscore
                var template = _.template($('search_template').html(),{});
                // Load the compiled HTML into the Backbone "el"
                this.$el.html(template);
            },
            events:{
                "click input[type=button]": "doSearch"
            },
            doSearch: function(){
                alert("search for " + $('#search_input').val());
            }
        });

        var search_view = new SearchView({el: $('#search_container')});
    </script>

</body>
</html>

I do not understand what i am doing wrong, Please guide me. thanks

Solution

  • nikoshr is right you have to use extend with lowercase and form making work the example you must change 

    var template = _.template($('search_template').html(),{});

    to 

    var template = _.template($('#search_template').html(),{});