backbone初步(秒味课堂)


作为一个大型程序框架,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


6 responses on “backbone初步(秒味课堂)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>