1 vài cơ bản về BackboneJS

1. Giới thiệu về BackboneJS

   BackboneJS là một thư viện Javascript, trong hàng đàn hàng đống các thư viện khác, nó được chú ý đặc biệt bởi cộng đồng phát triển web sử dụng Javascript bởi nó dễ sử dụng và rất dễ áp dụng cho các ứng dụng javascript.

   Chú ý rằng BackboneJS không phải là một framework mà là một library. Sự khác nhau của hai khái niệm này là “who is control”. Sử dụng library, bạn là người điều khiển và sử dụng. Cơ mà với framework thì ngược lại, bạn phải apply code của bạn theo phương thức của framework. Libraries mang lại cho bạn sự linh động, do bạn chủ động dùng nó, trong khi đó frameworks rất cứng đầu nên bạn phải viết code theo frame work (bắt buộc luôn, bạn cứ code nhiều thì biết), cơ mà việc sử dụng framework sẽ tiết kiệm cho bạn rất nhiều code bởi vì framwork thường đi theo một hoặc một số kiểu ứng dụng nhất định, còn libraries thì bạn có thể dùng cho ứng dụng nào cũng được.

2. 1 vài cơ bản của BackboneJS

   BackboneJS là một library phụ thuộc, nó sử dụng library khác, cụ thể như sau:

   . BackboneJS

   . Underscore

   . JQuery

   Nói qua về cấu trúc của Backbone: nó được tạo bởi một số các module như sau:

   . Model : Giống như linh hồn của app, model chứa dữ liệu, những dữ liệu này được dùng để trao đổi với server, được fill vào các View và show ra trang html, cũng như tính toán dữ liệu đề dựa trên nó.

   . View : Nếu model là linh hồn, thì view chính là thể xác, là phần da bọc bên ngoài, nó cho phép kết nối giữa model và html bên ngoài, fill dữ từ model vào các template, tạo thành code hml rồi show nó.

   . Collection : Có model thì cũng cần phải có cái gì đó để chứa và xử lý một danh sách các model này chứ đúng không, Collection được tạo ra là để làm điều đó.

   . Event : Backbone cũng là javascript, và nó hỗ trợ Event, cho phép bạn gọi thực hiện các thao tác trên model, view hoặc collection khi một sự kiện nào đó được gọi, bên cạnh các sự kiện bình thường như click, move,…, bạn cũng có thể tạo các event mới tùy ý.

   . Sync : Đây có lẽ là không thể thiếu đúng không, nó cho phép đồng bộ dữ liệu giữa client và server chỉ với phương thức save(). Ta chỉ việc khai báo endpoint, và gọi phương thức save() là được. Mà không cần phải sử dụng ajax ở khắp nơi nữa.

3. Backbone.Events

   Khai báo sử dụng các event ở trong BackboneJS

    var o = {}
    _.extend(o, Backbone.Events)

    o.on('zap', function () {
      console.log('zapped')
    })

    o.trigger('zap')
    //=> outputs 'zapped'

4. Backbone.Model

    // Create a new model by passing in some data
    var person = new Backbone.Model({ name: 'Bob', age: '30' })

    // Access the data
    person.get('name')
    //-> returns 'Bob'

    // Observe the data for changes
    // using the event methods that
    // the model has inherited
    person.on('change', function () {
      console.log('Something about this person changed')
    })

    // Mutate the data
    person.set('name', 'Robert')
    //-> outputs 'Something about this person changed'

5. Backbone.Collection

   Có thể hiểu collection là tập hợp nhiều model ,được khai báo và sử dụng như sau

            // Create an array of models that
        // can be passed in to a collection
        var models = []
        for (var i=0; i < 5; i++) {
          models.push(new Backbone.Model({ num: i })
        }

        // Create collection containing the models
        var collection = new Backbone.Collection(models)

        // An example of an underscore function -
        // some will return true if the function
        // passed to it returns true for any of
        // the collection's contents
        collection.some(function (model) {
          return model.get('num') === 3
        })
        //-> Returns the model that has { num: 3 }

        // An example of events bubbling up to the
        // containing collection - bind a listener
        // to the change event on the collection
        collection.on('change', function () {
          console.log('one of the models changed')
        })

        // Acces one of the models (not via
        // the collection) and change it
        models[4].set({ num: 10 })
        //-> Logs 'one of the models changed'

6. Backbone.View

   thực hiện việc hiển thị các model,collection ra ngoài :

    // Create model to hold the time
    var clockModel = new Backbone.Model({ time: new Date() })

    // Create view that listens to change
    // events on the model, and renders
    // each time it changes
    var ClockView = Backbone.View.extend(
      { initialize: function () {
          this.model.on('change', _.bind(this.render, this))
        }
      , render: function () {
          this.$el.empty().append(this.model.get('time'))
        }
      })

    // Instantiate a view and pass in the model
    var clockView = new ClockView({ model: clockModel })

    // Append the clockView element to the document body
    clockView.$el.appendTo('body')

    // Get the time to change every second
    // triggering the view to render
    setInterval(function () {
      clockModel.set('time', new Date())
    }, 1000)

    //-> The time in the document updates every second