Question

我在骨干视图中有以下代码：

var BookView = Backbone.View.extend({

initialize: function() {
    this.render();
},

render: function() {

  this.model.fetch({
    success : function(model, resp, opt) {
       alert(this.$el.html() ); //THIS ONE DOESN'T WORK?
    }
  });
  alert(this.$el.html() ); // THIS ONE WORKS FINE
}

});

我有两个alert(this.$el.html() );个调用，一个在提取之外，一个在里面。但由于某种原因，fetch调用之外的那个工作，但fetch调用内的一个返回错误： Uncaught TypeError: Cannot read property 'html' of undefined

Answer 1

在success内，this不再是View（严格模式下为undefined，否则为window。

要解决此问题，您可以使用常见的var that = this成语;有关成语的更多信息，请参阅此处：What does 'var that = this;' mean in JavaScript?

var BookView = Backbone.View.extend({

initialize: function() {
    this.render();
},

render: function() {
  var that = this; // define here

  this.model.fetch({
    success : function(model, resp, opt) {
       alert(that.$el.html() ); // Use that instead of this here.
    }
  });
  alert(this.$el.html() ); // THIS ONE WORKS FINE
}

});

替代选项：见.bind（） - 一个体面的追索权：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

render: function() {
  this.model.fetch({
    success : function(model, resp, opt) {
       alert(that.$el.html() ); 
    }.bind(this) // this.model.fetch.success now has bound 'this' permanently for any call to success from this method form here on out. 
  });
  alert(this.$el.html() );
}

Answer 2

请记住，JavaScript函数中的this取决于函数的调用方式，而不是函数的定义方式和位置（当然，绑定函数除外）。 Model#fetch文档没有为this回调指定任何特定success，因此它可能被称为普通函数（即this是window里面success回调）。结果是this.$el在undefined回调中success。{/ p>

您有多种选择：

使用标准var _this = this技巧将所需的上下文隧道传输到回调中：

var _this = this;
this.model.fetch({
  success : function(model, resp, opt) {
    alert(_this.$el.html());
  }
});

使用Function.prototype.bind将绑定函数用作回调：

this.model.fetch({
  success : function(model, resp, opt) {
    alert(this.$el.html());
  }.bind(this)
});

使用_.bind将回调绑定到所需的this：

this.model.fetch({
  success : _(function(model, resp, opt) {
    alert(this.$el.html());
  }).bind(this)
});

Answer 3

那是因为你无法访问这个＆＃39;再一次，打电话给这个＆＃39;实际上正在引用回调函数。

尝试绑定＆＃39;这个＆＃39;返回功能，或设置＆＃39;这个＆＃39;到渲染范围内的变量到“自我”＃39;什么的。

1 -

render: function() {
  this.model.fetch({
    success : function(model, resp, opt) {
       alert(this.$el.html() );
    }
  }.bind(this)); //Passes 'this' along for execution on the callback. 
  alert(this.$el.html() );
}

2 -

render: function() {
  var self = this;
  this.model.fetch({
    success : function(model, resp, opt) {
       alert(self.$el.html() ); //the scope of 'self' makes it in here
    }
  };
  alert(this.$el.html() );
}

Answer 4

javascript中的

this是当前上下文。因此，例如，如果success()将从按钮调用为单击事件处理程序，则this将是按钮。

尝试检查this方法中的success()是什么。阅读关于闭包的好教程，例如：http://www.javascriptkit.com/javatutors/closures.shtml

作为一种快速解决方案，我建议进行此更正：

render: function() {

  var that = this; // <<<<< Change 1

  this.model.fetch({
    success : function(model, resp, opt) {
      //alert(this.$el.html() ); //THIS ONE DOESN'T WORK?
      alert(that.$el.html() ); // <<<<<< Change 2
    }
   });
  alert(this.$el.html() ); // THIS ONE WORKS FINE
}

应该做的伎俩。

这个获取呼叫问题

4 个答案: