可以查看http://www.css88.com/doc/backbone/
backbone与angular http://www.infoq.com/cn/articles/backbone-vs-angular/
http://blog.csdn.net/huangxin0102/article/details/50930772
1.
/**
* 模型 - Model
*/
var Note = Backbone.Model.extend({
defaults: {
title: '',
created_at: new Date()
},
initialize: function() {
console.log('新创建了一条笔记：' + this.get('title'));
this.on('change', function(model, options) {
console.log('属性的值发生了变化');
});
this.on('change:title', function(model, options) {
console.log('title 属性发生了变化');
});
this.on('invalid', function(model, error) {
console.log(error);
})
},
validate: function(attributes, options) {
if (attributes.title.length < 3) {
return '笔记的标题字符数要大于 3';
}
}
}); /**
* 视图 - View
*/
var NoteView = Backbone.View.extend({
tagName: 'li',
className: 'item',
attributes: {
'data-role': 'list'
},
template: _.template(jQuery('#list-template').html()), render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
/**
* 集合 - Collection
*/
var NoteCollection = Backbone.Collection.extend({
model: Note,
initialize: function() {
this.on({
'add': function(model, collection, options) {
console.log('ID: ' + model.id + '模型添加到了集合里');
},
'remove': function(model, collection, options) {
console.log('ID: ' + model.id + '模型从集合里删除掉了');
},
'change': function(model, options) {
console.log('集合里的模型发生了变化');
}
});
}
});
//学习到的
/**
* var ss = new NoteCollection();
ss.add({id: 4, title: '西红柿炒鸡蛋的做法'});//可以这样子新添加一个
ss.add({id: 4, title: '西红柿炒鸡蛋的做法'}，{merge:true});
还有remove,reset,pop,shift
set方法可以设置remove:false的
*/ /**
* 集合视图 - Collection View
*/
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 note1 = new Note({id: 1, title: '西红柿炒鸡蛋的做法'});
var note2 = new Note({id: 2, title: '周六参加朋友的婚礼'});
var note3 = new Note({id: 3, title: '晚上回家洗尿布'}); var noteCollection = new NoteCollection([note1, note2, note3]);
var noteCollectionView = new NoteCollectionView({collection: noteCollection});
backbone的路由
var NoteRouter = Backbone.Router.extend({
routes: {
'notes': 'index',
'notes/:id': 'show',
'login(/from/*from)':'login'//*表示不论后边有多少层路由
},
index: function() {
jQuery('#note_list').html(noteCollectionView.el);
console.log('笔记列表');
},
show: function(id) {
this.navigate('login/from/notes/'+id,{trigger,true});//trigger true表示可以出发方法
console.log('笔记：' + id);
var note = noteCollection.get(id);
var noteView = new NoteView({model: note});
jQuery('#note_list').html(noteView.render().el);
}
});
var noteRoute = new NoteRouter;
Backbone.history.start();