backbone.js学习实例.doc

　　着手开始学习
　　什么是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啊
　　ment_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: '
　　});
　　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){
　　ment_collection = new comment_Collection();
　　ment_item_view = new comment_item_View({
　　model: ment_collection //传入的集合
　　});
　　var self = this;
　　ment_collection.fetch({
　　,
　　success: function(collection, resp) {
　　$('#content').append(new comment_add_View().render().el)
　　}
　　}); //fetch先绑定 rest事件
　　$('#content').html(ment_item_view.render().el);
　　}
　　});
　　var app = new AppRouter();
　　Backbone.history.start();
　　});
　　更多信息请查看IT技术专栏