| 标题 | backbone.js学习实例 |
| 内容 | 着手开始学习 什么是backbone.js? 美公的理解是 一种js的mvc的框架，分为Model(模型),View(视图)和Collection(集合)，如果有mvc分层开发经验的话，会容易理解。 为什么学习这个? 因为用他可以在的单个页面完成多个应用模块，给用户的感觉是不用刷新页面，适合webapp开发 $(function(){ var testModel = Backbone.Model.extend({ defaults:{ id:"1", name:'meigong', age:'22' } }); var Collection = Backbone.Collection.extend({ model:testModel }); var ItemView = Backbone.View.extend({ tagName:'tr', template: _.template($('#tpl-item').html()), initialize: function(){ this.model.bind('remove', this.unrender,this); this.model.bind('change', this.render,this); }, events: { 'click a.edit':'editItem', 'click a.del':'delItem', "blur input,select" : "saveItem" }, editItem:function(){ //获取所有的input var input = $(this.el).find('input'); input.each(function(k,v){ $(v).removeAttr('disabled'); }); }, delItem:function(){ //从集合中删除 app.collection.remove(this.model); }, saveItem:function(){ alert(2); }, unrender:function(){ $(this.el).remove(); }, render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } }); var View = Backbone.View.extend({ el:$('#test'), template: _.template($('#tpl-student').html()), initialize:function () { //this.model.bind("change", this.render, this); this.render(); this.collection = new Collection(); this.collection.bind('add', this.appendItem,this); this.id= 0; }, events: { 'click #btn':'addItem' }, addItem:function(){ this.id ++; this.testmodel = new testModel(); this.testmodel.set({ id:this.id }); //添加到集合中 this.collection.add(this.testmodel); }, appendItem:function(){ var itemView = new ItemView({model:this.testmodel}); $(this.el).append(itemView.render().el); }, render: function(eventName) { $(this.el).html(this.template()); } }); var app = new View(); }); 开始说明：本例是美公笔记草稿，本地运行没问题，如拷贝代码会缺少文件 修改的地方 1.把backone-min.js中的部分修改为create:”POST”,update:”POST”,”delete”:”DELETE”,read:”GET” 2.服务器端接受 post过来的json数据 $data = json_decode$GLOBALS['HTTP_RAW_POST_DATA']); 用到的模板 主文件代码 $(function(){ //实例化 index列表 //index列表的model var index_Model = Backbone.Model.extend({ ", //请求的地址 }); //model的集合 var index_Collection = Backbone.Collection.extend({ model: index_Model, //集合包含的model层 url: './get.php' //请求的地址 }); //对应的每个元素的view var index_list_View = Backbone.View.extend({ template: _.template($('#tpl-item').html()), initialize:function () { this.model.bind("change", this.render, this); //在model 执行set,add,destroy时会触发 }, events:{ //绑定事件 'click .bannerImg':'addNum', 'click .bannerInfo':'comment' }, addNum:function(){ //单击图片 显示的名字会改变 this.model.set({ //会触发change事件 'name':'超姐你好', }); this.model.save(null,{ //发起一个post请求 }) }, comment:function(){ var id = this.model.get('id'); app.navigate("comment/"+id, true); //hash导航url }, render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } }); //list View 是 index_list_View的集合 var index_item_View = Backbone.View.extend({ initialize: function() { this.model.bind('reset', this.render, this); //这里的model是个集合 传入的是index_Collection var self = this; this.model.bind("add", function (item) { // 在 index_Collection 执行add操作会触发 add 或者 发起create请求时也会触发 $(self.el).append(new index_list_View({model:item}).render().el); }); }, render: function(eventName) { //渲染 //这里的model是个集合 _.each(this.model.models,function(item) { $(this.el).append(new index_list_View({model: item}).render().el); }, this); return this; } }); //发表评论功能 var comment_add_View = Backbone.View.extend({ template: _.template($('#tpl-comment').html()), initialize:function () { this.render(); }, events:{ 'click .btn':'addCom', }, addCom:function(){ var title = $("input[name='title']").val(); var data = { title:title } //这里必须写app啊 app.comment_collection.create(data,{ , success:function(){ } }); }, render: function() { $(this.el).html(this.template()); //没有model时 直接写this.template() 。有model要解析model成字符串 用到的是this.model.toJSON() return this; } }); /***显示评论列表功能 代码解释同上**/ var comment_Model = Backbone.Model.extend({ ", defaults:{ title:'', } }); var comment_Collection = Backbone.Collection.extend({ model: comment_Model, url: 'http://www.biuman.com/test/before/test' }); var comment_list_View = Backbone.View.extend({ template: _.template($('#tpl-comment-list').html()), initialize:function () { this.model.bind("change", this.render, this); }, events:{ }, render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } }); var comment_item_View = Backbone.View.extend({ initialize: function() { this.model.bind('reset', this.render, this); //这里的model是个集合 var self = this; this.model.bind("add", function (item) { $(self.el).append(new comment_list_View({model:item}).render().el); }); }, render: function(eventName) { //这里的model是个集合 _.each(this.model.models,function(item) { $(this.el).append(new comment_list_View({model: item}).render().el); }, this); return this; } }); // Router var AppRouter = Backbone.Router.extend({ routes: { "": "list", "comment/:id":"comment" }, initialize: function() { }, list: function() { if(typeof this.index_collection == 'undefined'){ this.index_collection = new index_Collection(); this.index_item_view = new index_item_View({ model: this.index_collection //传入的index_collection集合 }); var self = this; this.index_collection.fetch({ success: function(collection, resp) { //console.dir(collection.models); } }); //fetch先绑定 rest事件 }else{ this.index_item_view = new index_item_View({ model: this.index_collection }); } $('#content').html(this.index_item_view.render().el); }, comment:function(id){ this.comment_collection = new comment_Collection(); this.comment_item_view = new comment_item_View({ model: this.comment_collection //传入的集合 }); var self = this; this.comment_collection.fetch({ , success: function(collection, resp) { $('#content').append(new comment_add_View().render().el) } }); //fetch先绑定 rest事件 $('#content').html(this.comment_item_view.render().el); } }); var app = new AppRouter(); Backbone.history.start(); }); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。