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 });
转载于:https://www.cnblogs.com/qzsonline/archive/2012/08/16/2642737.html
