标签：utf-8 attrs 索引 发送 on() end 变量 code --
backbone里很多思想都与后台有关，如果有后台语言基础的学习起来比较简单。
它是一个MVVM模型，因为我觉得前端MVVM，比MVC好理解，虽然它也是MVC，但
C的概念很模糊，因为前端mvc的c很不好理解，但mvvm就很简单。
backbone很多方法都要自己new，就像你做了个模子，然后不断的印出你要的样子。
backbone-Model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script src="./backbone/underscore.js"></script> <script src="./backbone/backbone.js"></script> </head> <body> <script> /* Backbone.Model.extend() 继承了Backbone.Model() Backbone.Model.extend() 相当于创建一个类 然后new 实例化 传入的对象属性会存放在attributes里 */ var Note=Backbone.Model.extend({ defaults:{title:"默认值"}, initialize:function(){ console.log("创建一个记录:"+this.get("title")); this.on("change:title",function(m,opt){ console.log("m:"); console.log(m); console.log("opt:"); console.log(opt); console.log("change"); }); this.on("invalid",function(m,err){ console.log(err); }); }, validate:function(attrs,options){ /*console.log(attrs); console.log(options);*/ if(attrs.title.length<3){ return "哈哈"; } } }); var note1=new Note({"title":"zhang"}); /*都是对于属性操作的*/ /* 增删查改 set(),unset(),has(),set() 获取 get() 默认值 defaults Backbone.Model.extend({defaults:{...}}) 初始化 initialize 监听事件 on() 有change this.on("change",function(model,option){}) this.on("change:title",function(){}) 验证: validate 在属性改变时加上{validate:true} 开启验证 返回错误信息 监听错误信息 invalid */ </script> </body> </html>
backbone-view
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script src="./backbone/underscore.js"></script> <script src="./backbone/backbone.js"></script> </head> <body> <!-- underScore 库的html模板 _.template(html) 传入对象{...} 变量为key 变量获取使用 <% = 变量 %> 类似jsp --> <script type="text/template" id="list1"> <ul> <p><%= txt %></p> <small><%= name %></small> </ul> </script> <script> var Model=Backbone.Model.extend(); /* 视图 BackBone.view.extend() html模板 tagName className attributes */ var viewNode=Backbone.View.extend({ "tagName":"p", "className":"txt", attributes:{ "data-id":"txt" }, template:_.template($("#list1").html()), render:function(){ this.$el.html(this.template(this.model.attributes)); $("body").append(this.el); } }); var m=new Model({name:"张志成",txt:"一二三四五"}); var view1=new viewNode({model:m}); view1.render(); /* el 属性 $el jq对象 render() 渲染html,即调用对象中的render函数 */ </script> </body> </html>
backbone-collection
这个要说说，如果有java基础的很好理解，就是集合，方便操作数据的集合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script src="./backbone/underscore.js"></script> <script src="./backbone/backbone.js"></script> </head> <body> <script> var Note=Backbone.Model.extend({ initialize:function(){ console.log("创建Model:"+this.get("id")); } }); var note1=new Note({txt:"一天",id:"a"}); var note2=new Note({txt:"二天",id:"b"}); var note3=new Note({txt:"三天",id:"c"}); /*集合 与java类似*/ /*增删改查 add 在没有设置{"merge":true}时，虽然添加过但不会真正添加到里面去 但可以监听到 {at:index} {at:1} 就是手动设置索引号，这样可以设置添加的位置 remove remove(note1) reset 重新定义集合 pop 删除最后一个 shift 删除第一个 push unshift */ var Collection=Backbone.Collection.extend({model:Note, initialize:function(){ this.on({ add:function(model,c,opts){ console.log("add"); }, remove:function(model,c,opts){ console.log("remove"); }, change:function(model,opts){ console.log("change"); } }); }}); var c=new Collection([note1,note2,note3]); c.add({id:"a",ccc:"sasa"},{"merge":true}); //c.remove(note3); /*set 可以把存在的模型就会合并， 不存在就添加 如果不想删除set没有传进来的，可以设置{remove:false} */ /* 获取集合 从ID get(index) 从索引 at(index) */ </script> </body> </html>
backbone-view-model-collection-route
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script src="./backbone/underscore.js"></script> <script src="./backbone/backbone.js"></script> </head> <body> <div id="container"></div> <script type="text/template" id="temp"> <span><%= id %></span> <span><%= name %></span> <p><%= txt %></p> </script> <script> /*增删可以对collection进行操控 改可以对model进行操控 on监听的第三个参数是指向，就是上下文环境 */ var Model=Backbone.Model.extend({ initialize:function(){ this.on("change",function(model,opts){}); } }); var Collection=Backbone.Collection.extend({model:Model}); var UlView=Backbone.View.extend({ tagName:"ul", className:"ul", attributes:{}, initialize:function(){ //$("#container").append(this.el); this.collection.on("add",this.addOne,this); this.render(); }, addOne:function(m){ //console.log(m); var vView=new LiView({model:m}); this.$el.append(vView.render().el); }, render:function(){ this.collection.each(this.addOne,this); return this; } }); var LiView=Backbone.View.extend({ tagName:"li", className:"li", template:_.template($("#temp").html()), initialize:function(){ this.model.on("change",this.change,this); }, change:function(m){ this.render(); }, render:function(){ this.$el.html(this.template(this.model.attributes)); return this; } }); var note1=new Model({"id":"a","txt":"哈哈","name":"张志成"}); var note2=new Model({"id":"b","txt":"哈哈aaa","name":"张志成"}); var note3=new Model({"id":"c","txt":"哈哈vvv","name":"张志成"}); var c=new Collection([note1,note2]); var view=new UlView({collection:c}); /*路由*/ /*:变量，会返回给指定函数 可选性输入(...) *是随意长度路径，会把*的路径返回出来 navigate是跳转，但不在历史记录里，设置trigger就是可以有了 */ var Route=Backbone.Router.extend({ routes:{ "a(/page/:id)":"index", "a/:id":"show", "login(/form/*form)":"login"}, login:function(form){ console.log(form); console.log("请先登录。。。"); }, index:function(id){ console.log("index"+id); if(id){ this.show(id); return ; } $("#container").append(view.el); }, show:function(id){ this.navigate("/login/form/a/"+id,{trigger:true}); var m=c.get(id); console.log(m); var v=new LiView({model:m}); $("#container").html(v.render().el); } }); var r=new Route(); /*监听hashchange,就是操作历史管理*/ Backbone.history.start(); /*fetch 需要后台php框架配合实现直接返回集合，collection.fetch()会发送ajax，返回集合*/ /*使用一整套backbone框架可以实现从前端到后台的结合*/ /*使用chrome 插件postman 可以很方便看到数据的返回*/ </script> </body> </html>
这就是基本的backbone知识，一门框架，基础知识懂了，后面各种使用方法由api补充就很快速理解这门框架了。
基础才是王道。
工作中很多东西都是要扎实的基础，然后才能快速找到问题，解决问题。
标签：utf-8 attrs 索引 发送 on() end 变量 code --
原文地址：http://www.cnblogs.com/zhangzhicheng/p/6821152.html
