backbone初步（秒味课堂）

最新推荐文章于 2024-07-02 21:05:43 发布

zccst

最新推荐文章于 2024-07-02 21:05:43 发布

阅读量129

点赞数

分类专栏： backbone等框架文章标签： JavaScript backbone ViewUI

本文链接：https://blog.csdn.net/zccst/article/details/84609637

版权

backbone等框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

作者：zccst

作为一个大型程序框架，backbone的思路是很好的
下面就好好学习一下

基本使用：
1，直接创建对象
2，给构造函数添加实例方法和静态方法
3，继承操作
4，自定义事件
5，数据与服务器
6，路由与历史管理
7，事件委托
8，前端模板

举例：
1，直接创建对象
var o = Backbone.Model();

2，给构造函数添加实例方法和静态方法

3，继承操作
A是一个Model，添加了aa方法
B是一个继承A的Model，则B的对象也有aa方法

4，自定义事件


var M = Backbone.Model.extend({
	default:{
		name:'hello'
	},
	//初始化构造函数
	initialize:function(){
		//表示model发生变化时触发
		/*this.on('change',function(){
			alert(123);
		});*/
		this.on("change:name",function(model){
			console.log(model);
		});
	}
});
var m = new M();
m.set("name","w1");
m.set("name","w2");
m.set("name","w3");


/**模型与视图相结合的例子*/
var M = Backbone.Model.extend({
	default:{
		name:'hello'
	}
});
var V = Backbone.View.extend({
	//初始化构造函数
	initialize:function(){
		//表示model发生变化时触发
		this.listenTo(model, 'change', show);
	},
	show :function(model){
		$("body").append("<div>"+model.get("name")+"</div>");
	}
});
var m = new M;
var v = new V({model:m});//model与view发生联系是将model对象传入view对象
m.set("name","ww");

5，数据与服务器


Backbone.sync = function(method_name, model, callback){
	console.log(method_name + JSON.stringify(model));
	model.id = 1;
};

var M = Backbone.Model.extend({
	default:{
		name:'hello'
	},
	url:"/user"
});

var m = new M;
m.save();//保存，调用validate，调用sync，第一次是create，第二次是update
m.save("name","ww");

还有Collection与服务器端调用（待续）

6，路由与历史管理
当在浏览器输入不同的URL时，调用不同的方法


var R = Backbone.View.Route({
    routes : {    //路由映射
        'help' : help,
        'help/method': search,
    }
    help : function(){alert('a');},
    search : function(){alert('b');}
});
var r = new R;
history.start();

对于历史管理：就是在前进或后退时也会触发调用（因为URL发生了变化）

7，事件委托


var V = Backbone.View.extend({
    el:$("body"), //委托元素
    events : {    //委托事件
        'click input' : aaa,
        'mouseover li': bbb,
    }
    aaa : function(){alert('a');},
    bbb : function(){alert('b');}
});

<body>
<input />
<ul><li>1</li></ul>
</body>

8，前端模板

例子分析：TODOS

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]