Backbone基础笔记
之前做一个iPad的金融项目的时候有用到Backbone，不过当时去的时候项目已经进入UAT测试阶段了，就只是改了改Bug，对Backbone框架算不上深入了解，但要说我一点都不熟悉那倒也不是，我不太喜欢这么不尴不尬地将就着，索性学习学习，整理一下好了。
网上的大牛说Backbone适合做大型的项目，小项目用Backbone有那么些杀鸡用牛刀的感觉，我目前的项目组用的是AngularJS，怎么说呢？个人觉得AngularJS是属于通吃那一类的，也说不出理由，纯粹个人感觉，不过当时写那个iPad项目的时候用了Backbone确实感觉整个结构还蛮清晰的，虽然使用的时候View层和Controller层并没有区分得很清楚。
好歹我那时候还一腔热血地买了本《Backbone.js实战》来看呢？总是不能浪费了。
书上一开头先是说underscore再说backbone，我表示这种把API往书里搬真的是很骗钱啊！所以我打算先从MVC的架构入手，先把整体架构搞清楚了。
Model数据模型
1.初始化
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
intNum++;
console.log("you have built " + intNum + " object");
}
}); var intNum = 0;
var stuA = new student();
var stuB = new student();
</script>
</body>
</html>
结果
2.赋值，变量的设置与读取
注意set()和get()
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
//construct code
}
}); var stuA = new student();
stuA.set({
Code:"01",
Name:"Larry",
Score:"90"
});
console.log(stuA.get("Code"));
console.log(stuA.get("Name"));
console.log(stuA.get("Score"));
</script>
</body>
</html>
结果
3.定义函数
注意escape()
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
//construct code
}, printLog:function(){
console.log(this.get("Code"));
console.log(this.get("Name"));
console.log(this.get("Score"));
console.log(this.escape("Code"));
console.log(this.escape("Name"));
console.log(this.escape("Score"));
}
}); var stuA = new student();
stuA.set({
Code:"01",
Name:"Larry",
Score:"90"
});
stuA.printLog();
</script>
</body>
</html>
结果
4.事件监听
注意on()方法
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
this.on("change:Name",function(){
var oldname = this.previous("Name");
var newname = this.get("Name");
if(oldname != newname){
console.log(oldname + "," + newname);
}
});
},
defaults:{
Code:"",
Name:"Devin",
Score:""
}
}); var stuA = new student();
stuA.set("Name","Larry");
</script>
</body>
</html>
5.数据验证
开启数据验证
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
this.on("invalid",function(model,error){
console.log(error);
});
}, validate:function(attrs){
if(!_.isString(attrs.Name)){
return 'the name must be String';
}
if(!_.isNumber(attrs.Score)){
return 'the score must be Number';
}
}, defaults:{
Code:"10001",
Name:"Devin",
Score:"100"
}
}); var stuA = new student();
stuA.set({
Code:"10105",
Name:12345,
Score:600
},{"validate":true});
console.log(stuA.toJSON());
</script>
</body>
</html>
结果
将set()方法里的第二个参数的validate改为silent即可关闭数据验证
stuA.set({
Code:"10105",
Name:12345,
Score:600
},{"silent":true});
6.删除数据
obj.unset(attrName) 删除指定名称的数据，删除属性
obj.clear() 清除对象中的全部数据
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
//construct code
}, defaults:{
Code:"10001",
Name:"Devin",
Score:100
}
}); var stuA = new student();
stuA.set({
Code:"10105",
Name:"Larry",
Score:600
}); //unset()
stuA.unset("Name");
console.log(stuA.get("Name"));
console.log(stuA.toJSON()); //previous
stuA.set("Name",stuA.previous("Name"));
console.log(stuA.toJSON()); //clear()
stuA.clear();
console.log(stuA.toJSON());
</script>
</body>
</html>
结果
7.attributes属性
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
//construct code
}, defaults:{
Code:"10001",
Name:"Devin",
Score:100
}
}); var stuA = new student();
stuA.set({
Code:"10105",
Name:"Larry",
Score:600
}); //输出attributes对象
console.log(stuA.attributes); //输出attributes的每一项
var attrs = stuA.attributes;
for(var i in attrs){
console.log(i + ":" + stuA.attributes[i]);
}
</script>
</body>
</html>
结果
8.previous()和previousAttributes()
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
initialize:function(){
//construct code
}, defaults:{
Code:"10001",
Name:"Devin",
Score:100
}
}); var stuA = new student();
stuA.set({
Code:"10105",
Name:"Larry",
Score:600
}); console.log(stuA.toJSON());
console.log(stuA.previousAttributes()); console.log("====I am spliter====="); stuA.set({
Code:"10106",
Name:"Lucy",
Score:602
});
console.log(stuA.toJSON());
console.log(stuA.previousAttributes());
</script>
</body>
</html>
结果
除此之外，在Model中还有一些ajax方法和属性
save() 发送数据方法
wait属性 对发送数据进行有效性验证
fetch() 从服务器获取数据
destroy() 从服务器删除数据
Collection模型集合
我一直以为C是Controller的，但是在Backbone中C是Collection，说白了，Model只是一个数据模型，真正要量产复制的还是由Collection来完成。
一 创建集合对象
1.自定义集合对象
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
}); var stuCollection = Backbone.Collection.extend({
model:student
}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:"100"
},
{
Code:"10102",
Name:"Devin",
Score:"101"
},
{
Code:"10103",
Name:"Lucy",
Score:"102"
}
]; var stus = new stuCollection(stuA); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
</script>
</body>
</html>
结果
注意观察stus.models，在stus定义的时候，我们给这个collection装入了我们定义好的stuA这个对象数组，而这个collection的model又是我们之前定义好的student，所以stus的model为student，它的collection为stuA，我们用stus.models就可以访问到stuA的所有数据
2.实例化集合对象
我们可以换一种new的方式，不必定义Collection，直接在new的时候调用Backbone.Collection()方法就好，并在方法内指认model。
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
}); //var stuCollection = Backbone.Collection.extend({
// model:student
//}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:"100"
},
{
Code:"10102",
Name:"Devin",
Score:"101"
},
{
Code:"10103",
Name:"Lucy",
Score:"102"
}
]; var stus = new Backbone.Collection(stuA,{
model:student
}); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
</script>
</body>
</html>
结果
3.自定义集合方法
示例：筛选分数在400分以上的学生信息进行显示
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
}); var stuCollection = Backbone.Collection.extend({
model:student,
good:function(){
return this.filter(function(stu){
return stu.get("Score")>400;
});
}
}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:100
},
{
Code:"10102",
Name:"Devin",
Score:500
},
{
Code:"10103",
Name:"Lucy",
Score:500
}
]; var stus = new stuCollection(stuA);
var stug = stus.good(); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
} console.log("=====I am spliter====="); for(var i=0;i<stug.length;i++){
console.log(stug[i].toJSON());
}
</script>
</body>
</html>
结果
二 操作集合中模型对象
1.移除集合对象中的模型
obj.remove(models,options) 从指定的集合对象中移除一个或多个模型对象
obj.pop(options) 移除集合对象中最后一个模型对象
obj.shift(options) 移除集合对象中首个模型对象
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
}); var stuCollection = Backbone.Collection.extend({
model:student
}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:100
},
{
Code:"10102",
Name:"Devin",
Score:500
},
{
Code:"10103",
Name:"Lucy",
Score:500
},
{
Code:"10104",
Name:"Jeff",
Score:550
},
{
Code:"10105",
Name:"Lei",
Score:600
}
]; var stus = new stuCollection(stuA); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.shift();
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.pop();
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.remove(stus.models[2]);
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
</script>
</body>
</html>
结果
2.添加集合对象中的模型
obj.add(models,options) 在集合对象的指定位置插入模型对象，如果没有指定位置i，默认为集合对象的尾部
obj.push(models,options) 向集合对象的尾部插入模型对象
obj.unshift(models,options) 向集合对象的头部插入模型对象
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
}); var stuCollection = Backbone.Collection.extend({
model:student
}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:100
},
{
Code:"10102",
Name:"Devin",
Score:500
},
{
Code:"10103",
Name:"Lucy",
Score:500
}
]; var newStu = [
{
Code:"10104",
Name:"Jeff",
Score:550
},
{
Code:"10105",
Name:"Lei",
Score:600
},
{
Code:"10106",
Name:"Felix",
Score:530
},
{
Code:"10107",
Name:"Annie",
Score:530
}
]; var stus = new stuCollection(stuA); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.unshift(newStu[1]);
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.add(newStu[0],{at:4});
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.push(newStu[2]);
stus.push(newStu[3]);
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
</script>
</body>
</html>
结果
3.查找集合对象中的模型
obj.get(id) 通过id来查找(ID是在模型对象产生时生成的标志，用于与服务器保持同步的编号)
obj.at(index) 通过制定索引号获取集合中某一个模型对象
obj.findWhere(attrs) 查找与属性名称和属性值相配的第一个模型对象
obj.where(attrs,first) 查找与属性名称和属性值相配的第一个模型或多个模型对象(当first为true时只返回第一个)
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
},
idAttribute:"Code"
}); var stuCollection = Backbone.Collection.extend({
model:student
}); var stuA = [
{
Code:"10101",
Name:"Larry",
Score:100
},
{
Code:"10102",
Name:"Devin",
Score:500
},
{
Code:"10103",
Name:"Lucy",
Score:500
},
{
Code:"10104",
Name:"Jeff",
Score:550
},
{
Code:"10105",
Name:"Lei",
Score:600
},
{
Code:"10106",
Name:"Felix",
Score:530
},
{
Code:"10107",
Name:"Annie",
Score:530
}
]; var stus = new stuCollection(stuA); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====search result====="); var result = stus.get(10106);
console.log(result);
console.log("=====I am get spliter====="); result = stus.at(3);
console.log(result);
console.log("=====I am at spliter====="); result = stus.findWhere({Score:500});
console.log(result);
console.log("=====I am findWhere spliter====="); result = stus.where({Score:500});
console.log(result);
console.log("=====I am where spliter=====");
</script>
</body>
</html>
结果
4.集合中模型对象的排序
obj.sort(options) 必须在实例化集合对象时添加一个名为"comparator"的方法，以此来规定排序规则。
<!DOCTYPE html>
<html>
<head>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
</head>
<body>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
},
idAttribute:"Code"
}); var stuCollection = Backbone.Collection.extend({
model:student,
comparator:function(model_1,model_2){
var compResult = model_1.get('Score')>model_2.get('Score');
return compResult?0:1;
}
}); var stuA = [
{
Code:"10102",
Name:"Devin",
Score:500
},
{
Code:"10104",
Name:"Jeff",
Score:550
},
{
Code:"10103",
Name:"Lucy",
Score:500
},
{
Code:"10107",
Name:"Annie",
Score:530
},
{
Code:"10105",
Name:"Lei",
Score:600
},
{
Code:"10106",
Name:"Felix",
Score:530
},
{
Code:"10101",
Name:"Larry",
Score:800
}
]; var stus = new stuCollection(stuA); for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("=====I am spliter====="); stus.sort();
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
</script>
</body>
</html>
结果
三 与服务器交互集合中的模型对象
fetch() 从服务器获取数据
create() 与服务器同步数据
View视图
Model和Collection都属于底层的数据处理，真正与页面交互的是View。
View的核心功能是处理数据业务逻辑，绑定DOM元素事件，渲染模型或集合数据。
一 视图基础
在定义一个视图对象之前，需要构建一个视图类
在构建类时，可以设置el属性关联DOM中的元素
也可以指定与视图相关的模型或集合类名，实现各个类之间对象的数据互访问
1.定义视图对象
记得先引入jQuery，我们在做DOM操作的时候会使用到jQuery
注意render()方法的写法和用法
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
.test{color:red;}
</style>
</head>
<body>
<script>
var testView = Backbone.View.extend({
id:"show",
className:"test",
render:function(content){
this.el.innerHTML = content;
document.body.appendChild(this.el);
}
}); var test = new testView();
test.render("Hello,World!");
</script>
</body>
</html>
结果
可以看到在DOM上生成了节点，id和class都是我们用代码动态添加上去的
2.视图对象访问模型对象
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
.test{color:red;}
</style>
</head>
<body>
<div id="show" class="test"></div>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
}); var stus = new student({
Code:"10101",
Name:"Larry",
Score:750
}); var stusView = Backbone.View.extend({
el:"#show",
render:function(){
this.el.innerHTML = JSON.stringify(this.model);
}
}); var stuv = new stusView({model:stus});
stuv.render();
</script>
</body>
</html>
结果
3.视图对象访问集合对象
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
.test{color:red;}
</style>
</head>
<body>
<div id="show" class="test"></div>
<script>
var stuModel = [
{
Code:"10101",
Name:"Larry",
Score:750
},
{
Code:"10102",
Name:"Felix",
Score:600
},
{
Code:"10103",
Name:"Devin",
Score:550
}
]; var stuList = new Backbone.Collection(stuModel); var stuView = Backbone.View.extend({
el:"#show",
render:function(){
var curlist = this.collection.models;
for(var i=0;i<curlist.length;i++){
this.el.innerHTML += JSON.stringify(curlist[i]) + "<br />";
}
}
}); var stuv = new stuView({collection:stuList});
stuv.render();
</script>
</body>
</html>
结果
二 视图中的模板
1.处理逻辑的模板
<%= %> 区域内的变量会在调用模板时被以字典方式传入的对应值所取代。支持简单的JS语句
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:14px;}
div{width:260px; padding:5px;}
</style>
</head>
<body>
<div id="score"></div>
<script type="text/template" id="score-tpl">
<%= score > 600 ? "good job":"just so so" %>
</script>
<script>
var stuView = Backbone.View.extend({
el:$("#score"),
initialize:function(){
this.template = _.template($("#score-tpl").html());
},
render:function(pscore){
this.$el.html(this.template({score:pscore}));
}
}); var stuv = new stuView();
stuv.render(600);
</script>
</body>
</html>
结果
2.显示多项内容的模板
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:12px;}
ul{list-style-type:none; padding:; margin:;}
</style>
</head>
<body>
<ul id="ulshowstus"></ul>
<script type="text/template" id="stus-tpl">
<li>Code:<%=Code %></li>
<li>Name:<%=Name %></li>
<li>Score:<%=Score %></li>
</script>
<script>
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:
}
}); var stus = new student({
Code:"",
Name:"Larry",
Score:
}); var stuView = Backbone.View.extend({
el:$("#ulshowstus"),
initialize:function(){
this.template = _.template($("#stus-tpl").html());
},
render:function(){
this.$el.html(this.template(this.model.toJSON()));
}
}); var stuv = new stuView({model:stus});
stuv.render();
</script>
</body>
</html>
结果
3.自定义模板变量标记
我们可以使用{{}}标记来代替%
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:12px;}
ul{list-style-type:none; padding:0; margin:0;}
</style>
</head>
<body>
<ul id="ulshowstus"></ul>
<script type="text/template" id="stus-tpl">
<li>Code:{{Code}}</li>
<li>Name:{{Name}}</li>
<li>Score:{{Score}}</li>
</script>
<script>
_.templateSettings = { interpolate:/\{\{(.+?)\}\}/g }; var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
}); var stus = new student({
Code:"10101",
Name:"Larry",
Score:750
}); var stuView = Backbone.View.extend({
el:$("#ulshowstus"),
initialize:function(){
this.template = _.template($("#stus-tpl").html());
},
render:function(){
this.$el.html(this.template(this.model.toJSON()));
}
}); var stuv = new stuView({model:stus});
stuv.render();
</script>
</body>
</html>
结果
三 视图中的元素事件
1.视图中简单事件绑定
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:12px;}
div{width:260px;text-align:center;padding:5px;}
.changed{border:solid 1px #555;}
</style>
</head>
<body>
<script>
var stuView = Backbone.View.extend({
el:$("body"),
initialize:function(){
this.render();
},
render:function(){
this.$el.append('<div id="backbone">Hello,World!</div>');
},
events:{
"click div#backbone":"togcls"
},
togcls:function(){
$("#backbone").toggleClass("changed");
}
}); var stuv = new stuView();
</script>
</body>
</html>
结果
点击前
点击后
2.绑定视图模板的多个事件
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:12px;}
div{width:260px;text-align:center;padding:5px;}
.changed{border:solid 1px #555;}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/template" id="main-tpl">
<div id="backbone"><%=mess%></div>
<input id="btnshow" type="button" value="click me" />
</script>
<script>
var stuView = Backbone.View.extend({
el:$("#main"),
initialize:function(){
this.template = _.template($("#main-tpl").html());
this.render();
},
render:function(){
this.$el.html(this.template({ mess:"Hello,World!" }));
},
events:{
"click div#backbone":"togcls",
"click input#btnshow":"toggle"
},
togcls:function(){
$("#backbone").toggleClass("changed");
},
toggle:function(){
$("#backbone").toggle();
}
}); var stuv = new stuView();
</script>
</body>
</html>
结果
button被点击前
button被点击后
3.动态绑定和取消视图中的事件
delegateEvents() undelegateEvents()
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/underscore-1.8.2-min.js"></script>
<script src="./js/backbone-1.1.2-min.js"></script>
<style>
body{font-size:12px;}
div{width:260px;text-align:center;padding:5px;}
.changed{border:solid 1px #555;}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/template" id="main-tpl">
<div id="backbone">Hello,World!</div>
<input id="btn_a" type="button" value="change style" />
<input id="btn_b" type="button" value="cancel bind" />
<input id="btn_c" type="button" value="rebind" onclick="stuv.rebind()" />
</script>
<script>
var stuView = Backbone.View.extend({
el:$("#main"),
initialize:function(){
this.template = _.template($("#main-tpl").html());
this.render();
},
render:function(){
this.$el.html(this.template());
},
rebind:function(){
this.delegateEvents(this.events);
},
events:{
"click input#btn_a":"btnclick_a",
"click input#btn_b":"btnclick_b"
},
btnclick_a:function(){
$("#backbone").toggleClass("changed");
},
btnclick_b:function(){
this.undelegateEvents();
}
}); var stuv = new stuView();
</script>
</body>
</html>
Backbone的笔记就到这里了，在学习的过程当中我发现，Backbone中模板的写法和Handlebars有点像，发现越来越喜欢Backbone了！
以上所有代码示例均来自《Backbone.js实战》 陶国荣著 机械工业出版社
虽然不是我的原创，但是代码是我一行一行手打出来的，每一个示例都亲自测试，调试，每一个结果都是我自己运行后截图上传上来的，如果有人转载，请您标注一下出处。
我的很多博文也是摘抄自很多地方的，我都会在页尾标明文章来源。
总结的好辛苦啊！但是我相信这辛苦一定值得！
参考文章：
http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html
http://www.css88.com/doc/backbone/
Backbone基础笔记的更多相关文章
- Java基础笔记 – Annotation注解的介绍和使用 自定义注解
Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 | 被围观 25,969 views+ 1.Anno ...
- Backbone学习笔记一Backbone中的MVC
原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- MYSQL基础笔记（六）- 数据类型一
数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...
- MYSQL基础笔记（五）- 练习作业：站点统计练习
作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...
- MYSQL基础笔记（四）-数据基本操作
数据操作 新增数据:两种方案. 1.方案一,给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致.凡是非数值数据,到需要使用引号(建议使用单引号)包裹. i ...
- MYSQL基础笔记(三)-表操作基础
数据表的操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名( 字段名 数据类型, 字段名 数据类型, 字段n 数据类型 --最后一行不需要加逗号 ...
- MYSQL基础笔记（二）-SQL基本操作
SQL基本操作 基本操作:CRUD,增删改查 将SQL的基本操作根据操作对象进行分类: 1.库操作 2.表操作 3.数据操作 库操作: 对数据库的增删改查 新增数据库: 基本语法: Create da ...
- MYSQL基础笔记(一)
关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...
随机推荐
- ssh结合使用
springxml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=& ...
- Spring Boot 推荐的 Java 配置
在学 Spring 的过程中 , 配置文件慢慢的被注解所替代 , 现在 Spring Boot 更是推荐使用 Java 配置完全来代替配置文件 . 需要使用到的注解有 : Bean 相关 : @Con ...
- BZOJ5312 冒险（线段树）
记录区间and/or,修改时如果对整个区间影响都相同就打标记,否则递归.复杂度不太会证. #include<iostream> #include<cstdio> #includ ...
- 解决 'findstr' 不是内部或外部命令，也不是可运行的程序或批处理文件 提示问题
如果出现提示“出现'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件” 这是PATH环境变量的问题,将windows命令的目录添加到PATH中就over了.即:在path中追加:% ...
- 【模考】2018.04.08 Travel
Description 有N个人出去旅行,第i个人去A国有Ai种游玩方式,去B国有Bi种游玩方式,问至少有C个人去A国的情况下,所有人的游玩方式有多少种不同的可能. 两种所有人的游玩方式不同当且仅当存 ...
- Pentaho的Mondrian对Hive的支持
需求描述 考虑直接在Hive或者Impala等Big Data方案,能够支持MDX查询,现调研一下Mondrian对hive的支持情况. 环境准备 hive环境,采用hive-0.10-cdh4.2. ...
- 【BZOJ4916】神犇和蒟蒻 解题报告
[BZOJ4916]神犇和蒟蒻 Description 很久很久以前,有一群神犇叫sk和ypl和ssr和hjh和hgr和gjs和yay和xj和zwl和dcx和lyy和dtz和hy和xfz和myh和yw ...
- 洛谷 P2731 骑马修栅栏 Riding the Fences 解题报告
P2731 骑马修栅栏 Riding the Fences 题目背景 Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. 题目描述 John是一个与其他农民一样 ...
- 20135319zl字符集报告
字符集实验 ASCII 首先,查找ZHULI五个字符对应的ASCII码,5a 48 55 4c 49. 然后,用vim打开一个空文档,按下":",输入%!xxd 然后,输入 000 ...
- java-----遇到问题------myeclipse----发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误
情况 myeclipse发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误. 这种情况一般是 .classpath文件设置的输出路径不对导致的. 1.. ...