Backbone js search use template

by erick

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/template" id="search_template">
    
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

<div id="searchContainer"></div>

JavaScript

(function($){
     var SearchView = Backbone.View.extend({
        el: $("#searchContainer") ,
        events: {
            'click input[type=button]': 'doSearch'  
        },
        initialize: function(){
            _.bindAll(this, 'render'); 
            // fixes loss of context for 'this' within methods
            this.render();
        },
        render: function(){
            //Pass variables in using Underscore.js Template
            var variables = { search_label: "My Search" };
            // Compile the template using underscore
            var template = _.template( $("#search_template").html(), variables );
            // Load the compiled HTML into the Backbone "el"
            $(this.el).html(template);
        },

        doSearch: function( event ){
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert( "Search for " + $("#search_input").val() );
        }
    });

        var search_view = new SearchView();
     
    })(jQuery);