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

**Model **

Như ở Part1 tôi đã giới thiệu về model trong Backbone.js. Hôm nay tôi sẽ đi sâu vào nó hơn một chút. Một số ý chính

• Model
• Initalization
• Getters and setters
• Listening for changes to your model
• Validation

Model

Backbone cho phép chúng ta tạo ra một model bằng cách sử dụng extending của Backbone.Model ex1:

(function () {
    var Product = Backbone.Model.extend();

    var candy = new Product();
    console.log(JSON.stringify(candy)); //Print: {}

    var cake = new Product({
      name: "Applesauce cake",
      price: "20"
    });
    console.log(JSON.stringify(cake));//Print: {"name":"Applesauce cake","price":"20"}
  })();

Initalization

Backbone cung cấp một hàm khởi tạo initalize. Hàm này sẽ được gọi khi chúng ta tạo một instance của model.

 var Product = Backbone.Model.extend({
      initialize: function(){
        console.log('This model has been initialized.');
      }
    });

Ngoài ra khi bạn muốn khởi tạo và kèm theo giá trị default của các attribute . bạn có thể sủ dụng option defauts

var Product = Backbone.Model.extend({
      initialize: function(){
        console.log('This model has been initialized.');
      },
      defaults: {
        name: "",
        price: 0
      }
    });

Getters and setters

Backbone cũng giống với các ngôn ngữ khác. bạn có thể sử dụng get, set function. Xem ví dụ dưới dây

...
var cake = new Product({
      name: "Applesauce cake",
      price: "20"
    });
console.log(cake.get("name")); //Print: Applesauce cake
cake.set({
      name: "Orange cake"
    })
    console.log(cake.get("name")); //Print: Orange cake

Direct access Để lắng nghe sự thay đổi của các attribute backbone cung cấp phương thức để listen sự thay đổi đó. Hãy sử dụng : "change:attribute" . điều quan trọng là bạn nên đặt listener này sớm nhất có thể để bắt được sự thay đổi của các attribute:

cake.on("change:name", function() {
      console.log('Name changed');
    })
    cake.set({
      name: "Orange cake"
    })

Listen for changes your model Nếu bạn thật sự muốn lắng nghe sự kiện thay đổi của toàn bộ model của bạn thì sao. Hoàn toàn có thể được. Chỉ cần thêm lắng nghe sự kiện cho chính model và đặt nó trong hàm initialize() như ví dụ bên dưới:

initialize: function(){
        console.log('This model has been initialized.');
        this.on("change", function() {
          console.log("Value has changed")
        })
      },

Validation

Ok. Backbone hỗ trợ validation bằng function validate(). Nó cho phép kiểm tra giá trị của attribute đó. Mặc định, thì việc validation sẽ diễn ra khi hành động save() và set(). Hãy xem ví dụ dưới đây

var Product = Backbone.Model.extend({
      initialize: function(){
        console.log('This model has been initialized.');
        this.on("change", function() {
          console.log("Value has changed")
        })
      },
      defaults: {
        price: 0
      },
      validate: function(attrs) {
        console.log(attrs);
        if (!attrs.name) {
          return 'I need your name';
        }
      }
    });

    var cake = new Product({
      name: "Applesauce cake",
      price: "20"
    });

    cake.on("change:name", function() {
      console.log('Name changed');
    })
    console.log(JSON.stringify(cake));//Print: {"name":"Applesauce cake","price":"20"}

    console.log(cake.get("name")); //Print: Applesauce cake

    cake.set({
      name: "Orange cake"
    })
    console.log(cake.get("name")); //Print: Orange cake

    // Remove the name attribute, force validation
    cake.unset('name');
    console.log(JSON.stringify(cake));//Print {"name":"Orange cake","price":"20"}

ở ví dụ trên. Khi việc unset("name") được diễn ra thì hàm validate sẽ được gọi đến. Lúc này chắc chắn rằng một invalid even sẽ được gọi đến và giá trị mới được gán vào sẽ không được chỉnh sửa. GiÁ trì name vẫn được giữ nguyên là "Orange cake".

Come and enjoy it!