Javascript-依賴注入和承諾

Question

我試圖在JS中傳遞一個對象（並拋出一些jQuery）。 :)

我想打電話給FlappyBarHelper.getUserPropertyCount()一旦方法promise.success功能運行。 我嘗試將this.FlappyBarHelper傳遞給：

return $.ajax({
              type: "GET",
              url: 'get-the-score',
              flappy: this.FlappyBarHelper,
          });

但是，這仍然讓flappy未定義promise.success

我的完整代碼是：

function Rating(FlappyBarHelper) {
    this.FlappyBarHelper = FlappyBarHelper; 
}

Rating.prototype.attachRaty = function(property_id)
{   

    var promise = this.getPropertyScoreAjax(property_id);

    promise.success(function (data) {


        $('#'+property_id).raty({
           click: function (score, evt) {

                $.ajax({
                    type: "GET",
                    url: '/set-the-score',
                })
                    .done(function (msg) {
                        $('#extruderTop').openMbExtruder(true);  
                            //**** FlappyBarHelper is undefined at this point ****///
                        FlappyBarHelper.getUserPropertyCount('.flap');
                    });  


            }
        });


    });

};

Rating.prototype.getPropertyScoreAjax = function(property_id)
{

      return $.ajax({
          type: "GET",
          url: 'get-the-score',
      });
}

Answer 1

閱讀（$ .ajax]（ https://api.jquery.com/jQuery.ajax/ ）的文檔

所有回調中的this引用是上下文選項中傳遞給設置中$ .ajax的對象； 如果未指定context，則這是對Ajax設置本身的引用。

因此，您應該在執行多個調用時傳遞變量：

Rating.prototype.attachRaty = function(property_id){   

  var promise = this.getPropertyScoreAjax(property_id);
  // it's best to use done
  promise.done(function (data) {

    $('#'+property_id).raty({
      // use proxy to keep context when the click will be received
      click: $.proxy(function(score, evt) {
        $.ajax({
          type: "GET",
          url: '/set-the-score',
          // propagate your variable
          FlappyBarHelper: this.FlappyBarHelper
        }).done(function (msg) {
          $('#extruderTop').openMbExtruder(true);  
          // here it should be defined
          this.FlappyBarHelper.getUserPropertyCount('.flap');
        });  
      }, this);
    });
  });
};

Rating.prototype.getPropertyScoreAjax = function(property_id) {
  return $.ajax({
    type: "GET",
    url: 'get-the-score',
    // propagate your variable
    FlappyBarHelper: this.FlappyBarHelper
  });
}

您還可以考慮制作一個閉包變量：

Rating.prototype.attachRaty = function(property_id){   
  // here is the closure variable
  var helper = this.FlappyBarHelper;

  var promise = this.getPropertyScoreAjax(property_id);
  // it's best to use done
  promise.done(function (data) {

    $('#'+property_id).raty({
      click: function(score, evt) {
        $.ajax({
          type: "GET",
          url: '/set-the-score'
        }).done(function (msg) {
          $('#extruderTop').openMbExtruder(true);  
          // you can still use the defined variable: power (and danger) of closures
          helper.getUserPropertyCount('.flap');
        });  
      }, this);
    });
  });
};

Rating.prototype.getPropertyScoreAjax = function(property_id) {
  return $.ajax({
    type: "GET",
    url: 'get-the-score'
  });
}