Backbone初步

来源：互联网发布：淘宝网男装夏装新款编辑：程序博客网时间：2024/06/12 22:36

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