Polymer access functions outside a function with Polymer 2.0

Question

As the title indicates, I'd like to know how to access a function from outside. It's possible to do it in ready() by using 'this.FunctionName'. But apparently, 'this' is a 'null' value in the firebase listener.

ready() {
    super.ready();
    //this.displayData("12","13");
    console.log(this);
    var database = firebase.database();
    var myDataref = database.ref('sessions/1');
    myDataref.on('child_added', function(snapshot) {
        var message = snapshot.val();
        //console.log("Left: "+message.left);
        //console.log("Right: "+message.left);
        console.log(this);
        //this.displayData(message.left, message.right);
    });
  }

  displayData(leftData, rightData) {
    var para = document.createElement("li");
    var t = document.createTextNode("Left: "+leftData+", Right: "+rightData);
    para.appendChild(t);
    console.log(para);
    this.$.mes.appendChild(para);
  }

Code

score 0 · Accepted Answer · answered Oct 05 '17 at 01:27

The simple way is to make an alias of this and use it inside the firebase listener.

Example:

ready() {
  super.ready();

  var _this = this;
  ...
  myDataref.on('child_added', function(snapshot) {
     ...
    _this.displayData(message.left, message.right);
  });
}

The other way is to use Javascript bind method, which allow you to specify the value for this.

Example:

ready() {
  super.ready();

  ...
  myDataref.on('child_added', function(snapshot) {
     ...
    this.displayData(message.left, message.right);
  }.bind(this));
}

Thanks! But is there a more logical way of doing it? – jaronnan Oct 05 '17 at 08:47 — jaronnan, Oct 05 '17 at 08:47

Polymer access functions outside a function with Polymer 2.0

1 Answers1