初识backbone.js(1)

最新推荐文章于 2018-12-17 10:54:00 发布

vcxiaohan2

最新推荐文章于 2018-12-17 10:54:00 发布

阅读量394

点赞数

分类专栏： backbone概念

本文链接：https://blog.csdn.net/u011500781/article/details/50249665

版权

backbone概念专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/underscore.js"></script>
	<script src="js/backbone.js"></script>
	
</head>
<style>
	* {
		padding: 0;
		margin: 0;
	}
	.ctn1 {width: 100px; height: 80px; border: 1px solid red;}
</style>
<body>
	<button class="btn1">点击</button>
	<button class="btn2">移入</button>
	<div class="ctn1"></div>
<script>

	/*//扩展实例方法和静态方法
	var Model = Backbone.Model.extend({
		say1: function() {
			console.log(1);
		}
	}, {
		say2: function() {
			console.log(2);
		}
	})

	var m1 = new Model();
	m1.say1();//--> 1
	Model.say2();//--> 2*/

	/*//继承
	var Model = Backbone.Model.extend({
		say1: function() {
			console.log(1);
		}
	})

	var Model2 = Model.extend();
	var m2 = new Model2();
	m2.say1();//--> 1*/

	/*//自定义事件
	var Model = Backbone.Model.extend({
		defaults: {
			name: "hwb"
		},
		initialize: function() {
			console.log(this.get("name"));
			this.on("change:name", function() {
				console.log(this.get("name"));
			})
		}
	})

	var m1 = new Model();//--> hwb
	m1.set({"name":"hwj"});//--> hwj*/

	/*//listenTo
	var Model = Backbone.Model.extend({
		defaults: {
			name: "hwb"
		}
	});

	var View = Backbone.View.extend({
		initialize: function() {
			this.listenTo(this.model, "change", this.log)//this.model固定写法
		},
		log: function(model) {
			console.log(model.get("name"));
			$("body").append("<div>"+ model.get("name") +"</div>");
		}
	});

	var m1 = new Model();
	var v1 = new View({model:m1});
	m1.set({"name":"hwj"});//--> hwj*/

	/*//Collection
	var Model = Backbone.Model.extend({
		initialize: function() {
			console.log(this.get("name"));
		}
	});

	var Coll = Backbone.Collection.extend({
		models: Model
	});

	var m1 = new Model();//--> undefined
	var m2 = new Model({"name":"hwb"});//--> hwb
	var m3 = new Model({"name":"hwj"});//--> hwj
	var m4 = new Model({"name":"hww"});//--> hww
	var c1 = new Coll([m1, m2, m3]);
	c1.remove(m3);
	c1.add(m4);

	c1.each(function(models) {
		console.log(models.get("name"));//--> undefined hwb hww
	})*/
	
	/*//Router
	var Router = Backbone.Router.extend({
		routes: {
			"log": "logGo",//#log
			"log/:value": "logGo2",//#log/x
			"log/key:value": "logGo3",//不生效
			"log/:value1/key2:value2": "logGo3",//#log/x/key2x
			"*others": "logGox",
		},
		logGo: function() {
			console.log("logGo");
		},
		logGo2: function(key, value) {
			console.log("logGo2:"+ key +","+ value);
		},
		logGo3: function(key, value) {
			console.log("logGo3:"+ key +","+ value);
		},
		logGox: function(key, value) {
			console.log("x");
		}
	});

	var r1 = new Router();
	Backbone.history.start();*/

	/**输入你服务器的网址
	/* 		如：http://www.baidu.com
	/* 替换hash
	/*		如1：http://www.baidu.com#log --> logGo
	/*		如2：http://www.baidu.com#log/x --> logGo2:x,null
	/*		如3：http://www.baidu.com#log/x/key2x --> logGo3:x,x
	/*
	/*
	**/

	/*//事件委托
	var View = Backbone.View.extend({
		el: "body",//这里$("body")会被过滤为"body"
		events: {
			"click .btn1": "clickEvent",
			"mouseover .btn2": "hoverEvent"
		},
		clickEvent: function() {
			console.log("clickEvent");
		},
		hoverEvent: function() {
			console.log("hoverEvent");
		}
	});

	var v1 = new View();*/

	/*//rander()
	var View = Backbone.View.extend({
		el: ".ctn1",
		initialize: function() {
			this.rander();//rander名不是固定的
		},
		rander: function() {
			console.log("渲染开始");//--> 渲染开始
			this.$el.html("backbone!");//$el === $(".ctn")
			console.log(this.el);//--> <div class="ctn1">backbone!</div>
		}
	});

	var v1 = new View();*/













</script>
		
</body>
</html>