// SAVE使用方法实例代码_________________________________________________________________________ // 因为跨域 该实例会返回一个非200状态 var Man = Backbone.Model.extend({ url : 'http://182.92.158.39/11.php', // 初始化属性 defaults : { name : '小', age : 28 } }); var man = new Man(); /** * save 保存数据 * 追加的参数以{}传递 * error 方法非200状态或返回非数字时触发 * success 200状态时回调的方法 model 为实例 response 后台返回的数字值 * error 200状态返回非数字 || 非200状态时调用error方法 model 为实例 response 为一个对象 */ man.save( {author: "F.D.R."}, { error: function(model, response){ console.log(response); }, success:function(model,response){ console.log(response); } } ); // SAVE使用方法实例代码_________________________________________________________________________ var Man = Backbone.Model.extend({ defaults : { a : 1 } }); var man = new Man(); /** * fetch 实例(请求并获取数据) * 参数 * url : 请求地址(可选) * type : 请求方法(可选) * data : 请求参数 fetch方法传递的参数只能以data传递 * success : 回调方法 接收2个参数modul response (可以接收后台返回的任何数据类型和save不同) modul : 实例对象 response : 后台返回值 * error : 错误回调方法 */ man.fetch({ url : '11.php', type : 'POST', success:function(model,response){ console.log(response); }, error:function(err){ console.log(err, 111); } }); // Collection 使用方法实例代码_________________________________________________________________________ // Model模型 var Book = Backbone.Model.extend({ defaults : { name : '小花' }, initialize : function (){ this.bind('change', function (){ l('监听代码'); }); } }); var b1 = new Book({ age : '21' }); var b2 = new Book({ age : '22' }); /** * Collection 是Model对象的一个有序集合 * Collection 中的方法 属性 : initialize : 同Model Model : Model类名 remove : 删除模块 方法: change : 同Model 监听Model数据变化 add : Collection数据变化时触发add事件 * 添加新模型有三种方法 new BookShelf().add(b1).... new BookShelf([b1, b2...]) new BookShelf().set : 添加新模型 清除原添加模型 */ // Collection 模型 var BookShelf = Backbone.Collection.extend({ // 添加Model属性 为Model类 // 为Collection添加新模块时 所有模块都包含Model中的数据 // 例如本例中 都包含name Model : Book, initialize : function (){ this.bind('change', function (){ l('监听代码1'); }); /* 如需要给所有Collection实例添加add事件 则为Collection类添加add事件 */ // this.bind('add', function (){ // l('触发了添加或删除事件'); // }); } }); // 实例化Collection // var book = new BookShelf([b1, b2...]) 另一种添加模型的方法 var book = new BookShelf(); // 为该实例添加add事件 // 如果写在Collection类中 则被所有实例继承 book.on('add', function (){ l('触发了添加或删除事件'); }); // 添加新模型 // 该操作会触发add事件 // 每添加一个模型就会触发一次add事件 book.add([b1, b2]); book.add({name : '小米'}); // 添加新模型 // 该操作会触发add事件 // 调用Collection实例的set方法会清除该实例之前保存Model值 // book.set({c:1}); // 删除模块 book.remove(b1); l(JSON.stringify(book)); // Router 使用方法实例代码_________________________________________________________________________ // 实例一 /** * Router 路由器 * 绑定监听hash参数的方法 1. 通过route定义规则 1) 通过正则匹配 2) 通过Backbone规则匹配 */ // 不支持添加g参数 // 添加一个子匹配 var rel = /(a)bc/im; var Router = Backbone.Router.extend({ initialize : function (){ // 用正则判断 // number参数匹配第一个子匹配的值 this.route(rel, "page", function(number){ l(number); }); }, // 如果不定义默认方法将执行这里定义的page page : function (number){ alert(number); } }); var rou = new Router(); Backbone.history.start(); // 实例二 /** * 绑定监听hash参数的方法 1. 通过routes定义规则 */ // 不支持添加g参数 // 添加一个子匹配 var Router = Backbone.Router.extend({ routes : { 'page/:id' : 'page' }, // 如果不定义默认方法将执行这里定义的page page : function (number){ l(number); } }); var rou = new Router(); Backbone.history.start(); // 实例三 /** * hash参数匹配规则 */ var Router = Backbone.Router.extend({ routes : { // 匹配page/随便字符 'page/:id' : 'page', // 匹配第一级以abc结尾 // 第二级以bcd结尾 // 例如可以匹配#abcabc/abdd '*abc/:bcd' : 'page2' }, // 如果不定义默认方法将执行这里定义的page page : function (number){ l(number); }, page2 : function (number){ l(number); } }); var rou = new Router(); Backbone.history.start(); // 实例四 /** * navigate方法 1. hash定义 2. 设置为true开启 false关闭 3. 如果navigate与事件连用可以放在history.start()前面 因为产生事件的时候可以保证history.start()已加载完 4. 如果不与事件连用则必须放在history.start()后 以保证 history.start()加载完 */ var Router = Backbone.Router.extend({ routes : { // 匹配page/随便字符 'page1/:id' : 'metA', 'page2/:id' : 'metB', 'page3/:id' : 'metC' }, metA : function (number){ l('metA' + number); }, metB : function (number){ l('metB' + number); }, metC : function (number){ l('metC' + number) } }); var rou = new Router(); // 与事件连用可以放在history前面 // 因为可以保证history.start已加载完 $('body').on('click', function (){ rou.navigate('page1/abc', true); rou.navigate('page2/bcd', true); }); Backbone.history.start(); // 不与事件连用 需要放在start()后面 // 以保证history.start加载完成 rou.navigate('page3/abc', true); // View 使用方法实例代码_________________________________________________________________________ /** * View 视图层 * events : 事件绑定 */ var TestView = Backbone.View.extend({ // el 属性也可以定义在这里 // el : $('body') // el属性可以接收选择器 例如 el : 'body' // 事件绑定 events: { 'click button#toggle' : 'toggle' }, // 初始化 initialize: function() { // _.template(arg, json) 解析模版 // arg : 需要解析的模版 // json : 给被解析的模版里的变量赋值 // 也可以不在这里给被解析的模版赋值 在render方法里赋值 this.template = _.template($("#search_template").html()); this.render(); }, render: function() { // 给被解析的模版里的变量赋值 var data = { name : '小花', age : 28 }; // 渲染模板 $(this.el).html(this.template(data)); // 为了链式调用 return this; }, toggle: function() { this.$("#hello").toggle(); return this; } }); var v = new TestView({el: $('body')}); // 删除视图 // $(v.el).remove(); // 动态创建父标签 var V = Backbone.View.extend({ // 标签名称 tagName : 'p', // 标签的class className : 'abc', // 标签id id : 'cs', render : function() { // this.el 为tagName中的p标签 this.el.innerHTML = 'Hello World!'; document.body.appendChild(this.el); } }); var listview = new V(); listview.render();