Backbone 教程（四）：Collection集合

集合是模型的有序组合，我们可以在集合上绑定 "change" 事件，从而当集合中的模型发生变化时fetch（获得）通知，集合也可以监听 "add" 和 "remove" 事件， 从服务器更新。

创建/添加/删除集合

// 创建集合
var Book = Backbone.Model.extend({
    defaults: {
        name: ''
    }
});

var BookList = Backbone.Collection.extend({
    model: Book,
    url: 'http://localhost:8001/service'
});

var book1 = new Book({
    name: 'Effective Java'
});

var book2 = new Book({
    name: 'Java核心技术'
});

var book3 = new Book({
    name: 'JavaScript语言精粹'
});

var books = new BookList([book1, book2, book3]);

console.log(books.models);

// 添加
books.add({
    name: 'add1'
});

// 添加到尾部
books.push({
    name: 'push1'
});

// 添加到头部
books.unshift({
    name: 'unshift1'
});

console.log(books.models);

// 删除
books.remove(books.models[2]);
// 移除尾部
books.pop();
// 移除头部
books.shift();

console.log(books.models);

从服务器获取集合数据

// 从服务器获取集合数据
books.fetch({
    success: function (collection, resp) {
        console.dir(collection.models);
    }
});

// 创建一个新模型,并同步到服务器
books.create({
    name: 'Thinking in Java',
    price: 395.70
}, {
    success: function (model, resp) {
        console.log(books.models);
    }
});

将数据批量同步到服务器

// 将数据批量同步到服务器
var Bok = Backbone.Model.extend({
    defaults: {
        name: '',
        price: 0
    }
});

var BokList = Backbone.Collection.extend({
    model: Bok,
    url: '/service',
    getIds: function () {
        return _(this.models).map(function (model) {
            return model.id;
        }).join(',');
    },
    createAll: function (options) {
        return Backbone.sync.call(this, 'create', this, options);
    },
    updateAll: function (options) {
        return Backbone.sync.call(this, 'update', this, options);
    },
    deleteAll: function (options) {
        var result = Backbone.sync.call(this, 'delete', this,
                _.extend({
                    url: this.url + '/' + this.getIds()
                }, options));
        this.remove(this.models);
        return result;
    }
});

var boks = new BokList();
boks.on('reset', function () {
    boks.createAll();
    boks.updateAll();
    boks.deleteAll();
})