backbone入门

最新推荐文章于 2018-05-08 23:53:26 发布

转载最新推荐文章于 2018-05-08 23:53:26 发布 · 659 阅读

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

miaov

13 篇文章

订阅专栏

demo1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var model = new Backbone.Model();
//
//var models = new Backbone.Collection();
//
//var view = new Backbone.View();






//var model = new Backbone.Model();
//
//model.set('name','hello');
//
//alert( model.get('name') );







var model_1 = new Backbone.Model({'name':'hello'});
var model_2 = new Backbone.Model({'name':'hi'});

var models = new Backbone.Collection();
models.add( model_1 );
models.add( model_2 );

alert( JSON.stringify(models) );

</script>
</head>

<body>
</body>
</html>

demo2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var M = Backbone.Model.extend({
//	aaa : function(){  //实例方法
//		alert(123);
//	}
//},{
//	bbb : function(){  //静态方法
//		alert(456);
//	}
//});
//
//var model = new M;
//model.aaa();
//M.bbb();







//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	}
//});
//
//var model = new M;
//alert( model.get('name') );







var M = Backbone.Model.extend({
	aaa : function(){
		alert(123);
	}
});

var ChildM = M.extend();

var model = new ChildM;
model.aaa();

</script>
</head>

<body>
</body>
</html>

demo3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	initialize : function(){  //初始化构造函数
//		
//		this.on('change',function(){
//			alert(123);
//		});
//		
//	}
//});
//
//var model = new M;
//model.set('name','hi');







//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	initialize : function(){  //初始化构造函数
//		
//		this.on('change:name',function(model){
//			
//			console.log(model);
//			
//		});
//		
//	}
//});
//
//var model = new M;
//model.set('name','hi');







$(function(){

	var M = Backbone.Model.extend({
		defaults : {
			name : 'hello'
		}
	});
	
	var V = Backbone.View.extend({
			
		initialize : function(){
			
			this.listenTo( this.model , 'change' , this.show );
			
		},
		show : function(model){
			$('body').append( '<div>'+ model.get('name') +'</div>' );
		}
		
	});
	
	
	var m = new M;
	var v = new V({model:m});
	m.set('name','hi');

});








//var model = new Backbone.Model();
//
//var C = Backbone.Collection.extend({
//	initialize : function(){
//
//		this.on('add',function(){
//			alert(123);
//		});
//		
//	}
//});
//
//var models = new C;
//models.add( model );

</script>
</head>

<body>
</body>
</html>

demo4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//Backbone.sync = function(method, model) {
//	  alert(method + ": " + JSON.stringify(model));
//	  model.id = 1;
//};
//
//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	url : '/user'
//});
//
//var m = new M;
//m.save();
//m.save({name : 'hi'});









Backbone.sync = function(method, model) {
	  alert(method + ": " + JSON.stringify(model));
};

var C = Backbone.Collection.extend({
	initialize : function(){
		this.on('reset',function(){
			alert(123);
		});
	}, 
	url: '/users'
});

var models = new C;
models.fetch();

</script>
</head>

<body>
</body>
</html>

demo5.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

var Workspace = Backbone.Router.extend({

	routes: {
		"help":                 "help",    // #help
		"search/:query":        "search",  // #search/kiwis
		"search/:query/p:page": "search"   // #search/kiwis/p7
	},
	
	help: function() {
		alert(1);
	},
	
	search: function(query, page) {
		alert(2);
	}

});

var w = new Workspace;
Backbone.history.start();

</script>
</head>

<body>
</body>
</html>

demo6.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

$(function(){
	
	var V = Backbone.View.extend({
		
		el : $('body'),
		events : {
			'click input' : 'aaa',
			'mouseover li' : 'bbb'
		},
		aaa : function(){
			alert(123);
		},
		bbb : function(){
			alert(456);
		}
		
	});
	
	var veiw = new V;
	
});

</script>
</head>

<body>
<input type="button" value="1" />
<ul>
	<li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
</ul>
</body>
</html>

demo7.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//$(function(){
//
//	var M = Backbone.Model.extend({
//		defaults : {
//			name : 'hello'
//		}
//	});
//	
//	var V = Backbone.View.extend({
//			
//		initialize : function(){
//			
//			this.listenTo( this.model , 'change' , this.show );
//			
//		},
//		show : function(model){
//			$('body').append( '<div>'+ model.get('name') +'</div>' );
//		}
//		
//	});
//	
//	
//	var m = new M;
//	var v = new V({model:m});
//	m.set('name','hi');
//
//});









$(function(){

	var M = Backbone.Model.extend({
		defaults : {
			name : 'hello'
		}
	});
	
	var V = Backbone.View.extend({
			
		initialize : function(){
			
			this.listenTo( this.model , 'change' , this.show );
			
		},
		show : function(model){
			$('body').append( this.template(this.model.toJSON()) );
		},
		template: _.template($('#template').html())
		
	});
	
	
	var m = new M;
	var v = new V({model:m});
	m.set('name','hi');

});

</script>
</head>

<body>

<!--<script type="text/template" id="template">
	
	<div><%= name %></div>
	
</script>-->




<script type="text/template" id="template">
	<% for (var i=0;i<5;i++) { %>
		<div><%= name %></div>
	<% } %>
</script>
</body>
</html>