jQuery——何时添加bind(this)

最新推荐文章于 2024-09-23 08:42:52 发布

原创最新推荐文章于 2024-09-23 08:42:52 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个关于页面渲染时异步加载数据，并在后续操作中正确使用这些数据的具体问题及解决方案。通过在调用后台服务后正确地绑定数据到当前作用域，避免了数据未准备好就进行下一步操作的情况。

遇到的问题：

页面渲染时，调用后台服务，查询出的attrId是有数据的；渲染页面渲染完成后，在调试页面打断点，在全局变量this.attrId中保存了数据。

afterRender: function() {
  this.$('.js-rollback-reason').hide();
  action.queryAttrIdByCode(this.attrCode).then(function(attrId) {
    this.attrId = attrId;
  });
},

但是在下面的方法中，使用this.attrId数据依然为null；

onRollbackClick: function() {
  var operContent = this.$('.js-text-form').val() || null;
  var workOrderIds = this.workOrderIds;
  var rollbackReason = this.$rollbackReason ? this.$rollbackReason.combobox('getSelectedItem') : '';
  var reasonId = rollbackReason ? rollbackReason.actReasonId : '';
  if (this.auditResult === '1') {
    action.checkInWorkOrder({
      componentId: this.componentId,
      componentName: this.componentName,
      operContent: operContent,
      operAttrDtoList: [{
        attrId: this.attrId,
        attrValue: this.auditResult
      }]
    }, workOrderIds[0]).then(function() {
      // 确认先调close函数，再弹出提示。
      this.close();
      fish.toast('success', res.CHECK_IN_WORK_ORDER_SUCCESS);
    }.bind(this));
  } else {
    action.rollbackWorkOrder({
      componentId: this.componentId,
      componentName: this.componentName,
      operContent: operContent,
      operAttrDtoList: [{
        attrId: this.attrId,
        attrValue: this.auditResult
      }],
      rollbackReasonId: reasonId
    }, workOrderIds[0]).then(function() {
      // 确认先调close函数，再弹出提示。
      this.close();
      fish.toast('success', res.CHECK_IN_WORK_ORDER_SUCCESS);
    }.bind(this));
  }
},

解决问题：

后来发现是上面调用后台服务后，没有把数据绑定在this中，所以只需在调用后台服务后添加bind(this)即可；

afterRender: function() {
  this.$('.js-rollback-reason').hide();
  action.queryAttrIdByCode(this.attrCode).then(function(attrId) {
    this.attrId = attrId;
  }.bind(this));
},