着手开始学习

　　什么是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({

　　url:"./get.php", //请求的地址

　　});

　　//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请求

　　url:'http://www.biuman.com/test/before/update2'

　　})

　　},

　　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,{

　　url:'http://localhost/ci/before/insert2',

　　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({

　　url:"./get.php",

　　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