Backbone 基本操作整理
模型操作
note.set(‘title’,’hi’,{validate:true}) //使用验证功能
note.set(‘title’,’mickey’) //设置属性的值
note.clear() //清除note的全部属性
note.has(‘title’) //判断是否有title这个属性
note.get(‘title’) //返回note的title属性的值
视图操作
集合操作
var noteCollection =new NoteCollection([note1,note2]) //新建一个集合
noteCollection.add(note1) //把note1的模型添加到集合中去 参数是一个数组 例如 [note2,note3]
noteCollection.add({id:4,title:’mickey4444’}) //传递一个对象，对象自动转化为该模型本身定义了的东西，如果已经存在相同id的对象的 则不执行
noteCollection.add({id:1,title:'mickey11111'},{merge:true}) //传递一个对象，及时对象已经存在，但会覆盖，同时这个对象也会被覆盖
noteCollection.remove(note1) //移除模型
noteCollection.reset([note1,note2]) //覆盖集合里面的所有模型，如果参数为空，则清空集合里面的所有模型
noteCollection.pop() //删除最后一个模型 并返回该模型 push()
noteCollection.shift() //删除第一个模型，并返回该模型 unshift()
noteCollection.add(note3,{at:1}) //将note3插入到索引号为1的位置上，也就是第二个元素
noteCollection.set([note1,note2]) //插入覆盖模型，如果元素已在，如果不同则合并，否则不操作。如集合中没有该模型，则插入，如果集合中有该模型，参数中没有，则删除模型
noteCollection.set([note1],{remove:false}) //只是插入note1模型 不进行其他操作
noteCollection.get(3) //得到id号为3的模型
noteCollection.at(1) //得到索引号为1的模型
div.container>h1.page-header{Collection View}+div#note_list
相关的文档操作
jQuery('#note_list').html(noteCollectionView.el) 把视图中的东西添加到 note_list 元素中，并且当 noteCollectionView改变的时候 页面中的内容页会有所改变
相关代码示例
/**
* 定义模型
*/
var Note = Backbone.Model.extend({
defaults:{ //更多属性
title:'',
created_at:new Date()
},
initialize:function(){ //立即执行函数 一直监听的状态
console.log("新建了一条笔记："+this.get('title')) //会立刻执行
//- 用note.set('title','mickey222')
this.on('change',function(model,options){ //当属性发生变化时候触发的事件无变化则不触发
console.log("属性的值发生了变化")
})
this.on('change:title',function(model,options){ //当title属性发生变化时触发的事件
console.log("title属性")
})
// 验证失败之后立即触发的函数
this.on('invalid',function(model,error){
console.log(error)
})
},
//----验证(属性，号码)
validate:function(attributes,options){
if(attributes.title.length<3){
return '笔记的标题要大于三'
}
},
//----验证失败了之后
});
/**
* 视图 - View
*/
var NoteView = Backbone.View.extend({
tagName:'li', //el标签的类型
className:'item' , //标签的类
attributes:{ //其他属性
'data-role':'list' //因为中间有一个符号所以要用引号
},
//使用的模板
template:_.template(jQuery('#list-template').html()),
//渲染的方法
render: function(){
this.$el.html(this.template(this.model.attributes)) //$el返回el元素的jquery对象
return this;
}
});
var note =new Note({ //模型
title:'mickey0000'
})
var noteView =new NoteView({
model:note //使用的模型
})
/**
* 集合-Collection
*/
//模型的组合
var NoteCollection = Backbone.Collection.extend({
model:Note, //规定的nodel类型
// 当发生某时间时候立刻执行的函数
initialize: function(){
this.on({
//增加模型的事件
'add': function(model,collection,options){ //（被添加的模型,集合,选项）
console.log("ID:"+model.id+'模型添加到集合里')
},
//移除模型的事件
'remove':function(model,collection,option){
console.log("ID:"+model.id+"模型从集合里删除了")
},
//单个模型发生了变化 体现在
//noteCollection.add({id:1,title:'1111'},{merge:true}) 的时候
'change':function(model,option){
console.log("集合里的模型发生了变化")
}
});
}
})
/**
* 测试
*/
var note1=new Note({id:1,title:'mickey1111'})
var note2=new Note({id:2,title:'mickey2222'})
var note3=new Note({id:3,title:'mickey3333'})
/**
* 集合视图
*/
var NoteCollectionView = Backbone.View.extend({
tagName:'ul',
//初始化
initialize: function(){
this.collection.on('add',this.addOne,this)
this.render()
},
//渲染方法
render:function(){
//循环处理集合里面的模型
this.collection.each(this.addOne,this)
return this;
},
addOne: function(note){
var noteView =new NoteView({model:note})
this.$el.append(noteView.render().el)
}
})
//创建一个集合
var noteCollection = new NoteCollection([note1,note2,note3])
//创建一个集合视图
var noteCollectionView = new NoteCollectionView({collection:noteCollection})
/**
* 路由器 - Router
*/
var NoterRouter = Backbone.Router.extend({
//所用到的路由 和处理路由用到的函数
routes:{
//路由：处理函数
'notes(/page/:page)':'index', // 第一个是静态的page 第二个是参数动态的page ()可选择的地址
'notes/:id':'show', //可以接收id作为show的参数 /#notes/id
//如果在后面再加上 /然后再加其他东西 可以作为参数 backbone不会捕捉到
'login(/from/*from)':'login' //*为一个参数，可以表示一个地址里面的多个部分
},
index: function(page){
var page = page || 1;
jQuery("#note_list").html(noteCollectionView.el);
console.log("笔记列表,第"+page+"页")
},
show: function(id){
this.navigate('login/from/notes'+id,{trigger:true})
//this表示当前的路由对象 改变地址栏 并不会触发hashchange事件
//当设置了 {trigger:true} 的时候就会出发相应的hashchange事件
console.log("笔记："+id);
var note = noteCollection.get(id);
console.log(note)
var noteView = new NoteView({model:note})
console.log(noteView.el)
jQuery("#note_list").html(noteView.render().el)
},
login: function(from){
console.log("请先登录...目的地:"+from);
}
})
var noteRoute = new NoterRouter;
//开始监视hashchange事件
Backbone.history.start();