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 });
