backbone点滴

可以查看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();