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。。。。。进行中。。。。。
backbone实例01的更多相关文章
- Backbone实例todos分析
源码来自:http://todomvc.com/examples/backbone/ 这是一个用Backbone.js完成的待办事项实例,精简但完善,可以帮助很好的帮助理解Backbone的API,M ...
- matplotlib 绘图实例01：正弦余弦曲线
该讲的实例结果如下图所示: 第01步:导入模块,并设置显示中文和负号的属性: import matplotlib.pyplot as plt import numpy as np plt.rcPara ...
- Node聊天程序实例01
作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. 本实例要实现 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器
哇!终于到了obj-c编程系列的第15篇喽,一路走过来满不容易的哦!(怎么个意思,这才哪到哪啊!),为了能够更好的练习obj-c在Cocoa框架上的编程,接下来会以N篇Cocoa实例的博文来巩固和记忆 ...
- Spring.Net 简单实例-01(IOC)
1.话不多说看操作.新建"Windows窗体应用程序" 2:通过配置文件创建IOC容器 首先引入安装包 3:定义一个接口(更好的体现封装性,当然也可以直接使用类) 定义一个类,实现 ...
- Struts2+DAO层实现实例01——搭建Struts2基本框架
实例内容 利用Strust2实现一个登陆+注册功能的登陆系统. 实现基础流程:
- 一个简单的backbone实例（基于139邮箱）
先看一下效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta http-equ ...
- Vue + ElementUI的电商管理系统实例01 登录表单
效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...
随机推荐
- 重学ps_1
1,选取 打开图片->点击选取工具->ctrl+c->ctrl+n->ctrl+v 2,去除图片背景 打开你要去除背景的图片->在图层面板中->双击图层把图层改为0 ...
- 【Java】实战Java虚拟机之五“开启JIT编译”
今天开始实战Java虚拟机之五“开启JIT编译” 总计有5个系列 实战Java虚拟机之一“堆溢出处理” 实战Java虚拟机之二“虚拟机的工作模式” 实战Java虚拟机之三“G1的新生代GC” 实战Ja ...
- JavaScript 入门教程四 语言基础【2】
一.数据类型介绍: undefined null NaN 1.判断当前变量是否为 undefined: if (i === undefined) 或者 if (typeof (i) === " ...
- java jdbc
1.java 的jdbc类包括,DriverManager,Connection Connection con = DriverManager.getConnection("jdbc:odb ...
- HTTP,FTP,TCP,UDP及SOCKET
一.TCP/IP协议简析TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层:网络层:IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议传输层:TCP协议与UDP协议应用层:F ...
- linux的sysctl基本配置
# Controls the use of TCP syncookiesnet.ipv4.tcp_syncookies = 1 # me write paramnet.ipv4.tcp_timesta ...
- ES6 will change the way you write JS code.
https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ Counting to 6 The previous editions ...
- 几何服务，cut功能，输入要素target(修改后)内容。
几何服务,cut功能测试,输入要素target(修改后)内容. {"displayFieldName":"","fieldAliases": ...
- Apache增加Basic Auth
在.htaccess文件中增加 AuthUserFile /var/www/htpasswd/test.htpasswd AuthName EnterPassword AuthType Basic r ...
- AVAudioPlayer播放本地音频
AVAudioPlayer苹果官方上说一般用于播放本地音频,不能用于播放网络上的音频. 具体的代码:先导入 #import <AVFoundation/AVFoundation.h> // ...