backbone实例01

　　backbonejs往简单说，就是一前端MVC框架，适合用于单页面、复杂的前端逻辑。

　　直接上代码，里面都有相关注释，重点是理解清楚view、collection、model这三者如何关联调用。

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <title>backbone实例01</title>
 </head>
 <body>
     <input type="text" id="add">
     <ul id="man-list">
     </ul>
     <script src="vendor/zepto.js"></script>
     <script src="vendor/underscore.js"></script>
     <script src="vendor/backbone.js"></script>
     <script>
     (function ($) {
         //定义model
         var People = Backbone.Model.extend({
                defaults: {
                    name: null
                }
         });

         //定义Collection
         var Peoples = Backbone.Collection.extend({
             model: People,//关联上了相关model
             initialize: function(options) {
                 this.bind('add',options.view.show);//这里事件监听关键
             }
         });

         //定义view
         var AppView = Backbone.View.extend({
             el: $("body"),
             initialize: function() {
                 this.peoples = new Peoples({view: this});//关联上集合
             },
             events: {
                 'keypress #add': 'addMan'
             },
             addMan: function(e) {
                 var key = e.which;
                 if(key !== 13) return;
                 var name = $(e.target).val();
                 var people = new People({name:name});
                 this.peoples.add(people);//添加model到集合，与此同时会触发集合中的监听方法
             },
             show: function(model){//集合调用view中的方法，并能将集合中的model传递过来
                 var template = "<li>你们好，我是"+model.get('name')+"，请多多关照!</li>";
                 $('#man-list').append(template);
                 $('#add').val('');
             }
         });

         new AppView();
     })(Zepto);
     </script>
 </body>
 </html>

　　该例中，入口是Appview，其初始化时就关联了一collection，在该collection中关联上了model，并添加了‘add’监听方法，该方法在往集合中添加model时出发，这里在出发时会调用view中的相关方法渲染页面。

　　backbone实例02。。。。。进行中。。。。。