backbone实例01
backbonejs往简单说，就是一前端MVC框架，适合用于单页面、复杂的前端逻辑。
直接上代码，里面都有相关注释，重点是理解清楚view、collection、model这三者如何关联调用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 5 <title>backbone实例01</title> 6 </head> 7 <body> 8 <input type="text" id="add"> 9 <ul id="man-list"> 10 </ul> 11 <script src="vendor/zepto.js"></script> 12 <script src="vendor/underscore.js"></script> 13 <script src="vendor/backbone.js"></script> 14 <script> 15 (function ($) { 16 //定义model 17 var People = Backbone.Model.extend({ 18 defaults: { 19 name: null 20 } 21 }); 22 23 //定义Collection 24 var Peoples = Backbone.Collection.extend({ 25 model: People,//关联上了相关model 26 initialize: function(options) { 27 this.bind('add',options.view.show);//这里事件监听关键 28 } 29 }); 30 31 //定义view 32 var AppView = Backbone.View.extend({ 33 el: $("body"), 34 initialize: function() { 35 this.peoples = new Peoples({view: this});//关联上集合 36 }, 37 events: { 38 'keypress #add': 'addMan' 39 }, 40 addMan: function(e) { 41 var key = e.which; 42 if(key !== 13) return; 43 var name = $(e.target).val(); 44 var people = new People({name:name}); 45 this.peoples.add(people);//添加model到集合，与此同时会触发集合中的监听方法 46 }, 47 show: function(model){//集合调用view中的方法，并能将集合中的model传递过来 48 var template = "<li>你们好，我是"+model.get('name')+"，请多多关照!</li>"; 49 $('#man-list').append(template); 50 $('#add').val(''); 51 } 52 }); 53 54 new AppView(); 55 })(Zepto); 56 </script> 57 </body> 58 </html>
该例中，入口是Appview，其初始化时就关联了一collection，在该collection中关联上了model，并添加了‘add’监听方法，该方法在往集合中添加model时出发，这里在出发时会调用view中的相关方法渲染页面。
backbone实例02。。。。。进行中。。。。。
