Backbone初步

最新推荐文章于 2018-09-12 12:54:59 发布

形形色色的人

最新推荐文章于 2018-09-12 12:54:59 发布

阅读量307

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u014338577/article/details/49278075

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Backbone.Events（事件）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>

<script>
    var object1 = {};
    _.extend(object1, Backbone.Events);

    object1.bind('data', function(data) {
        alert('Receive Data: ' + data);
    });
    object1.trigger('data', 'I\'m an Backbone.event');
    object1.unbind('data');
    object1.trigger('data', 'I\'m an Backbone.event');

    var object2 = {};
    _.extend(object2, Backbone.Events);
    object2.on("alert1", function(msg) {
        alert("Triggered " + msg);
    });

    object2.trigger("alert1", "an event");
    object2.trigger("alert1", "another event");
</script>
<body>

</body>
</html>

Model（模型）

Models 用来创建数据，校验数据，存储数据到服务器端。Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到这个 change 事件，进行重绘。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script>
	var Game = Backbone.Model.extend({
		initialize : function() {
			alert("Oh hey! ");
		},
		defaults : {
			name : 'Default title',
			releaseDate : 2011,
		}
	});
	
    // Create a new game  
    var portal = new Game({ name: "Portal 2", releaseDate: 2015});  
    var test = new Game();
    var res = test.get('releaseDate');
    alert(res);
    // release will hold the releaseDate value -- 2011 here  
    var release = portal.get('releaseDate');  
    alert(release);
    // Changes the name attribute  
    portal.set({ name: "Portal 2 by Valve"});
    alert(portal.get('name'));  
</script>
</head>
<body>

</body>
</html>

Collection（集合）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script>
	var Book = Backbone.Model.extend({
		defaults : {
			title :"default"
		}
	});

	var BookShelf = Backbone.Collection.extend({
		model : Book
	});

	var book1 = new Book({
		title : 'book1'
	});
	var book2 = new Book({
		title : 'book2'
	});
	var book3 = new Book({
		title : 'book3'
	});

	var bookshelf = new BookShelf;
	bookshelf.add(book1);
	bookshelf.add(book2);
	bookshelf.add(book3);

	bookshelf.each(function(book) {
		alert(book.get("title"));
	});
</script>

</head>
<body>

</body>
</html>

形形色色的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Backbone初步

BackboneInsert title here var object = {}; _.extend(object, Backbone.Events); object.on("alert1",function(msg) { alert("Triggered " + msg); }); object.tri
复制链接

扫一扫