1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title></title> 6 <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 7 <script type="text/javascript" src="underscore.js"></script> 8 <script type="text/javascript" src="backbone.js"></script> 9 <script type="text/javascript" src="index.js"></script> 10 </head> 11 <body> 12 <div id="search_container">a</div> 13 <script type="text/template" id="search_template"> 14 <label>Search</label> 15 <input type="text" id="search_input" /> 16 <input type="button" id="search_button" value="Search" /> 17 </script> 18 </body> 19 </html>
1 $(window).load(function() { 2 SearchView = Backbone.View.extend({ 3 initialize: function() { 4 this.render(); 5 }, 6 render: function() { 7 // Compile the template using underscore 8 var template = _.template($("#search_template").html(), {}); 9 // Load the compiled HTML into the Backbone "el" 10 this.el.html(template); 11 }, 12 events: { 13 "click input[type=button]": "doSearch" 14 }, 15 doSearch: function(event) { 16 // Button clicked, you can access the element that was clicked with event.currentTarget 17 alert("Search for " + $("#search_input").val()); 18 } 19 }); 20 21 var search_view = new SearchView({ 22 el: $("#search_container") 23 }); 24 });