CODEWITHSUNDEEP
javascriptsocket.iopolymerpolymer-1.0
Dual Giupponi
Dual Giupponi

Reputation: 3

Accessing polymer functions from Javascript

Sorry for the inconvenience caused (my English is not very good and I am using the translator to write this). I have searched enough looking in StackOverFlow and other sites and I do not find the answer I need. I am working on a project with Polymer, in which I have declared functions as follows:

Polymer({
  is: 'LaserLand-Cronometro',
  properties: {
    jugadores: Object,
    minuto: Number,
    segundo: Number,
    centesima: Number,
    hora:{
      type: String,
      value: '00:00:00'
    },
    task: Number
  },
  cronometro: function(){
    this.centesima++
    if(centesima>99){
      this.centesima=0
      this.segundo++
    }else if(segundo > 59){
      this.segundo=0
      this.minuto++
    }
    let mm;
    let ss;
    let cc;
    if(this.centesima<9){cc='0'+this.centesima}
    if(this.segundo<9){ss='0'+this.centesima}
    if(this.minuto<9){mm='0'+this.minuto}
    this.hora=mm+':'+ss+':'+cc
  },
  evento: function(e){
    console.log(e);
  }
});

But as I'm working with Socket.io, I need to access them using javascript vanilla, for example:

<script>
Polymer({
  is: 'LaserLand-Cronometro',
  properties: {
    jugadores: Object,
    minuto: Number,
    segundo: Number,
    centesima: Number,
    hora:{
      type: String,
      value: '00:00:00'
    },
    task: Number
  },
  cronometro: function(){
    this.centesima++
    if(centesima>99){
      this.centesima=0
      this.segundo++
    }else if(segundo > 59){
      this.segundo=0
      this.minuto++
    }
    let mm;
    let ss;
    let cc;
    if(this.centesima<9){cc='0'+this.centesima}
    if(this.segundo<9){ss='0'+this.centesima}
    if(this.minuto<9){mm='0'+this.minuto}
    this.hora=mm+':'+ss+':'+cc
  },
  evento: function(e){
    console.log(e);
  }
});
var socket = io('http://localhost:7000',{'forceNew': true});
var time;
socket.on('inicio', function(data){
    time = setInterval(cronometro, 100);
});

I already tried different ways to do that, but none walks, so I need your help. In other words, is there any way to access the functions declared in polymer directly from javascript?

Upvotes: 0

Views: 124

Answers (1)

cholz
cholz

Reputation: 46

You can not call this method because there is no instance created yet!

It seems from your code, that you have defined a custom element called 'LaserLand-Cronometro'. Your method cronometro will only be available within an instance of this custom element. So all you have to do is to create/get an instance of the custom element first and then call its method.

You have to include Socket.io in the Polymer registration life cycle or create an instance yourself.

....
var laserLand = document.createElement('LaserLand-Cronometro');

var socket = io('http://localhost:7000',{'forceNew': true});
var time;
socket.on('inicio', function(data){
    time = setInterval(laserLand.cronometro, 100);
});

I might suggest to create a custom-element, that wraps your backend connection via socket.io and provides an API, to bind the data into your polymer app. Maybe the firebase elements give some inspiration.

Hope this helps.

Upvotes: 3

Related Questions