Backbone.js from Beginner to ... (Part4)

Collections

Collection là một dạng của Models và được tạo trong extend Backbone.Collection

Thông thường, khi tạo một collection, bạn cũng có thể muốn định nghĩa một model nào đó mà collection có chưa model đã xác định đó.

Ví dụ như sau :

 <script type='text/javascript'>
  (function () {
    var Product = Backbone.Model.extend({
      defaults: {
        title: '',
        completed: false
      }
    });

    var CakesCollection = Backbone.Collection.extend({
      model: Product
    });

    var cake1 = new Product({title:'cake1', id: 1});

    var cakes = new CakesCollection([cake1]);
    console.log("Collection size: " + cakes.length);
  })();
</script>

Tóm lại thì một collection chỉ có một model nhưng một model thì có thể có nhiều collection.

Thêm và xóa model từ collection

Giả sử như ta đã có một mảng các thể hiện của một model là Product. Sau đó một colllection mới được tạo. Mảng các models đã được khởi tạo trước đó có thể được thêm và bị xóa khỏi collection bằng lệnh add và remove.

Ví dụ như sau:

<script type='text/javascript'>
  (function () {
    var Product = Backbone.Model.extend({
      defaults: {
        title: '',
        completed: false
      }
    });

    var CakesCollection = Backbone.Collection.extend({
      model: Product
    });

    var a = new Product({ title: 'cake1.'}),
      b = new Product({ title: 'cake2.'}),
      c = new Product({ title: 'cake3.'});

    var cakes = new CakesCollection([a,b]);
    console.log("Collection size: " + cakes.length);
// Logs: Collection size: 2

    cakes.add(c);
    console.log("Collection size: " + cakes.length);
// Logs: Collection size: 3

    cakes.remove([a,b]);
    console.log("Collection size: " + cakes.length);
// Logs: Collection size: 1

    cakes.remove(c);
    console.log("Collection size: " + cakes.length);
// Logs: Collection size: 0
  })();
</script>

Lắng nghe sự kiện

Collection cũng được cung cấp để có thể lắng nghe được các sự kiện add và remove khi bất kỳ một model nào được thêm hoặc xóa khỏi collection.

Ex3:

...
 var cakes = new CakesCollection([a,b]);
    cakes.on('add', function(cake) {
      console.log('you have added ' + cake.get('title'))  //Logs: you have added cake3.
    })
...

Thêm vào đó, chúng ta có thể bind được sự kiện change khi có bất kỳ thay đổi nào của model thuộc collection đó.

...
    cakes.add(b);
    var cake3 = cakes.get(2)
    cake3.set('title', 'Cake2.2')

Các hàm hỗ trợ

Collection cũng được hỗ trợ các hàm nhằm mục đích tương tác với mảng các model. Ví dụ như: forEach, sortBy, map, min, max, pluck filter....

Come and enjoy it!