聚合物 this.push 不工作

Question

在 Polymer 1.x 中，我试图将数据从我的数据库推送到一个数组，但由于某种原因，它突然停止工作。

当运行这段代码

ready: function(){
    var leserbriefRef = firebase.database().ref('leserbriefe');
        leserbriefRef.on('value', function(snap) {
          var n = snap.child('numLeserbriefe').val();
          console.log(n);
          this.lbriefe = [];
          for(var i=0; i<n; i++){
                this.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
            }
        });
  }

我收到此错误消息： firebase.js:283 未捕获类型错误：this.push 不是函数

我不知道为什么。本周早些时候它仍然有效。

Answer 1

这是js初学者的一个常见问题，主要是this关键字的用法。匿名函数中 this 变量的上下文不是您想要的（在本例中为元素）。要解决这个问题，您可以使用闭包[1]、.bind[2] 或更新的 ES2015 箭头函数[3].

关闭

ready: function() {
  // assign this to self
  var self = this;

  var leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', function(snap) {
    var n = snap.child('numLeserbriefe').val();
    console.log(n);
    self.lbriefe = [];
    for(var i = 0; i < n; i++){
      self.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
    }
  });
}

.绑定

ready: function() {
  var leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', function(snap) {
    var n = snap.child('numLeserbriefe').val();
    console.log(n);
    this.lbriefe = [];
    for(var i = 0; i < n; i++){
      this.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
    }
  }.bind(this)); // bind this keyword to element's
}

ES2015 箭头函数（还不如完整的 ES2015）

ready() {
  const leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', (snap) => { // arrow functions!
    const n = snap.child('numLeserbriefe').val();
    console.log(n);
    this.lbriefe = [];
    for(let i = 0; i < n; i++){
      this.push("lbriefe", snap.child(`l${n - 1 - i}`).val());
    }
  });
}

来源：

[1] https://developer.mozilla.org/en/docs/Web/JavaScript/Closures

[2] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[3]https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

你必须注意 this 绑定，因为 this 的范围是函数内部的变化。

ready: function(){
    var leserbriefRef = firebase.database().ref('leserbriefe');
        leserbriefRef.on('value', function(snap) {
          var n = snap.child('numLeserbriefe').val();
          console.log(n);
          this.lbriefe = [];
          for(var i=0; i<n; i++){
                this.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
            }
        }.bind(this));
  }

聚合物 this.push 不工作

Polymer this.push not working

javascript

firebase

polymer

polymer-1.0

关闭

.绑定

ES2015 箭头函数（还不如完整的 ES2015）