聚合物this.push不工作 [英] Polymer this.push not working

问题描述

在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  this.push（lbriefe，snap.child（'l'+（n- 1  -  i））。val（））; 
} 
}）; 
 
 $ / code> 

我得到这个错误信息：
firebase.js：283 Uncaught TypeError：this.push不是一个函数



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


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

Closure

  ready：function（）{
 //赋值给自己
 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（））; 
} 
}）; 
 
  

.bind

  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））; //将此关键字绑定到元素的
} 
  

ES2015 arrow函数ES2015）

  ready（）{
 const leserbriefRef = firebase.database（）。ref（'leserbriefe'）; 
 leserbriefRef.on（'value'，（snap）=> {//箭头函数！
 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（））; 
} 
}）; 
 
 
 
 
 $ b 
 来源：  
 
 
 [1]  https：//developer.mozilla。 org / en / docs / Web / JavaScript / Closure  
 
 
 
 [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  
 
In Polymer 1.x I am trying to push data from my database to an array, but for whatever reason, it suddenly stopped working.

When running this code
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());
            }
        });
  }
I get this error message:
firebase.js:283 Uncaught TypeError: this.push is not a function

I don't know why. Earlier this week it still worked.
解决方案
This is a common gotcha among js beginners, basically the usage of the this keyword. The context of the this variable inside the anonymous function is not the one you intended (in this case, the element). To solve this, you can use closures[1], .bind[2], or the newer ES2015 arrow functions[3].

Closure

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());
    }
  });
}


.bind

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 arrow function (might as well go full 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());
    }
  });
}
Sources:

[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

                        
这篇关于聚合物this.push不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！