Using Promises in BackboneJS

Deferred Objects
Deferred Objects là 1 phần của JQuery từ phiên bản 1.5 và cũng là 1 phần cơ bản của các Ajax call ở trong Jquery.Về cơ bản ,ta có thể hiểu Deferred Objects đối tượng tiện ích giúp việc thực hiện việc khai báo các callback vào hàng đợi và có thể gọi đi gọi lại , đồng thời chuyển hướng các action success hoặc failure của các Ajax call.
Bài viết này sẽ giới thiệu bạn các sử dụng các Deferred Objects trong các Jquery Ajax call. Đây là những gì cho phép bạn thực hiện chuỗi callbacks trực tiếp tắt của phương pháp AJAX, nhưng nó thậm chí còn tốt hơn khi bạn có thể tận dụng giá trị trả về từ các model toàn khác nhau. Điều này sẽ trở thành một hành vi thực sự quan trọng trong một ứng dụng Backbone, nhưng chỉ nếu bạn biết làm thế nào để tận dụng lợi thế của nó.

Sử dụng Deferred với BackboneJS

Ví dụ đơn giản để dùng Deferred trong BackboneJS

  /* Using Deferreds in Backbone.js */

  var Collection = Backbone.Collection.extend({
      // Using the response from https://gist.github.com/1431041
      url: '/gh/gist/response.json/1431041/',

      initialize: function() {
          // Assign the Deferred issued by fetch() as a property
          this.deferred = this.fetch();
      }
  });

  var View = Backbone.View.extend({
      render: function() {
          var _this = this;
          log('model.render() called');
          // this.collection is passed in on instantiation
          this.collection.deferred.done(function() {
              log('data returned and rendered');
              var data = _this.collection.toJSON();
              // Lets just output the response into the DOM
              $('pre').html( JSON.stringify( data, ', '  ' ) );
          });
      }
  });

  var myCollection = new Collection();

  // Initialize the View, passing it the collection instance
  var myView = new View({
      collection: myCollection
  });

  // Call render immediately!
  myView.render();
  function log( msg ){
      console.log( msg + '	-	' + (new Date()).getTime());
  }

Hãy bắt đầu với Collection (hoặc Model) mà chúng ta muốn tự động lấy data từ phía server. Thông thường chúng ta chỉ cần gọi fuction fetch() ở trong initializer, tuy nhiên giờ thì khác hơn 1 chút là ta sẽ gán Deferred object bằng kết quả lấy được từ function

  var Collection = Backbone.Collection.extend({
   // Using the response from https://gist.github.com/1431041
   url: '/gh/gist/response.json/1431041/',

   initialize: function() {
       // Assign the Deferred issued by fetch() as a property
       this.deferred = this.fetch();
   }
 });

Thực hiện render dữ liệu ra view:

    var View = Backbone.View.extend({
     render: function() {
         var _this = this;
         // this.collection is passed in on instantiation
         this.collection.deferred.done(function() {
             var data = _this.collection.toJSON();
             // Lets just output the response into the DOM
             $('pre').html( JSON.stringify( data, ', '  ' ) );
         });
     }
  });

 var myCollection = new Collection();

 // Initialize the View, passing it the collection instance
 var myView = new View({
     collection: myCollection
 });

 myView.render();

Có vài điều thú vị trong ví dụ này: ta đang khởi tạo 1 basic view, và tạo rainstantiating cùng với collection ở bên dưới. Khi ta tạo ra 1 view instance, thì collection sẽ đc truyền vào đồng thời tạo ra liên kết cùng nhau ở trong app. Điều này cho phép tham khảo 1 collection bên trong view. Bạn có thể sử dụng jQuery.when () để xử lý nhiều đối tượng Deferred cùng một lúc và khi bạn cần để đối phó với các đối tượng có thể có deferreds. Dưới đây là một ví dụ:

$.when( myCollection1.deferred, myCollection2.deferred )
.then( successCallback, errorCallback );

Tham khao: