What is a view? 

 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 });
posted @ 2012-08-16 17:48  小猩猩君  阅读(233)  评论(0)    收藏  举报