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。。。。。进行中。。。。。

backbone实例01的更多相关文章

  1. Backbone实例todos分析

    源码来自:http://todomvc.com/examples/backbone/ 这是一个用Backbone.js完成的待办事项实例,精简但完善,可以帮助很好的帮助理解Backbone的API,M ...

  2. matplotlib 绘图实例01：正弦余弦曲线

    该讲的实例结果如下图所示: 第01步:导入模块,并设置显示中文和负号的属性: import matplotlib.pyplot as plt import numpy as np plt.rcPara ...

  3. Node聊天程序实例01

    作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. 本实例要实现 ...

  4. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  5. obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器

    哇!终于到了obj-c编程系列的第15篇喽,一路走过来满不容易的哦!(怎么个意思,这才哪到哪啊!),为了能够更好的练习obj-c在Cocoa框架上的编程,接下来会以N篇Cocoa实例的博文来巩固和记忆 ...

  6. Spring.Net 简单实例-01(IOC)

    1.话不多说看操作.新建"Windows窗体应用程序" 2:通过配置文件创建IOC容器 首先引入安装包 3:定义一个接口(更好的体现封装性,当然也可以直接使用类) 定义一个类,实现 ...

  7. Struts2+DAO层实现实例01——搭建Struts2基本框架

    实例内容 利用Strust2实现一个登陆+注册功能的登陆系统. 实现基础流程:

  8. 一个简单的backbone实例（基于139邮箱）

    先看一下效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta http-equ ...

  9. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

随机推荐

  1. jquery 时间戳与日期转换

    (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: functio ...

  2. Oracle EBS Setup

    1. Prevent close other forms after close original form

  3. pict（Pairwise Independent Combinatorial Testing）工具使用

    PICT工具就是在微软公司内部使用的一款成对组合的命令行生成工具,现在已经对外提供,可以在互联网上下载到. 要把输入类型和其对应的参数输入到一个CSV格式(CSV: 以逗号分割的纯文本文件,不带有任何 ...

  4. 【转】WiFi基础知识

    http://blog.csdn.net/myarrow/article/details/7930131 1. IE802.11简介 标准号 IEEE 802.11b IEEE 802.11a IEE ...

  5. [bzoj1087][scoi2005]互不侵犯king

    题目大意 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. 思路 首先,搜索可以放弃,因为这是一 ...

  6. 加快ArcGIS Server创建缓存速度，CachingTools的实例数

    大比例尺的缓存,由于文件非常大,创建非常花费时间,在硬件设备已固定的情况下,调整Caching tools的实例数是加快创建缓存的方法之一. 简单来说:CachingTools的最大并行实例数决定了C ...

  7. angular 数据绑定

    1.ng-band 使用在index.html页面使用,该页面不要直接使用双花括号,否则网络延迟的时候页面会显示双花括号,由于通常只在index.html里导入angular.js,所以在其他模板页面 ...

  8. Java局部变量

    局部变量是在方法被执行时创建,在方法执行结束时被销毁.局部变量在使用时必须进行赋值操作或被初始化,否则会出现编译错误. 在相互不嵌套的作用域中可以同时声明两个名称,类型相同的局部变量, public ...

  9. 可爱的Python_课后习题_CDay−2 完成核心功能

    1. 在前文的grep 实现例子中,没有考虑子目录的处理方式,因为如果直接open 目录进行读grep 是古老实用且高效的模式文本匹配工具,在所有的Unix/Linux 系统中都会默认安装,它最常做的 ...

  10. git学习--常用命令

    1.初始化一个 Git 仓库 git init <directory> //参数 directory:作为Git仓库的目录 2.从Git 仓库中拷贝项目 git clone <rep ...