Question

在我的样本中，他们模拟了一个像这样的ajax调用：

route('/page1', 'template1', function () {
  this.greeting = 'Hello world!';
  this.moreText = 'Loading...';

  // Simulating an Ajax call which take 0.5 s
  setTimeout(function () {
    this.moreText = 'Bacon ipsum...';
  }.bind(this), 500);
});

绑定似乎更新＆＃34;这个＆＃34;并触发

Object.observe(current.controller, current.render.bind(current));

更新视图。

我尝试使用实际的ajax调用执行相同的操作：

route('/products', 'item_tmpl', function(){
    this.products = []
    $.getJSON('/data/list.json', function(data){
        this.products = data;
        //var dataObject = { products: data };
    }).bind(this);
})

但返回undefined不是一个函数。

Answer 1

setTimeout存在一个大问题：将使用错误的this调用回调。不是来自调用函数的this。

来自MDN：

当你将方法传递给setTimeout（）（或任何其他函数时，for 那个问题，它会被错误地调用这个值。

因此，此代码的作者使用bind()：

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值

应该解决这个问题。

$.getJSON('/data/list.json', function(data){
        this.products = data;
        //var dataObject = { products: data };
}).bind(this);

您在bind返回时致电$.getJSON。

但正如您可以在bind引用中读到的那样，它是Function方法。 $.getJSON不返回任何内容undefined。这就是undefined is not a function.

的原因

纠正它应该看起来像：

$.getJSON('/data/list.json', function(data){
        this.products = data;
        //var dataObject = { products: data };
}.bind(this));

Answer 2

您需要阅读JavaScript中的“this”关键字 -

这里

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

将某些内容绑定到超时是什么意思？

2 个答案: