Polymer this.push not working

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キャッチされない例外TypeError：this.push私はなぜ知らない機能

ではありませんが。今週初め、それはまだ働いた。

Answer 1

これはjsの初心者の間では一般的な問題であり、基本的にはthisというキーワードを使用しています。匿名関数内の変数thisのコンテキストは、意図したものではありません（この場合、要素）。これを解決するには、closures [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()); 
    } 
    }); 
} 

.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矢印機能（だけでなく、完全な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

this

Answer 2

の範囲は、関数内の変更であるため、よくあなたは、結合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)); 
    }