Notifications in Polymer

Question

Good morning, I have the following code for my Reader:

<link rel="import" href="../polymer/polymer-element.html">
<dom-module id="reader">



<template>

  <div>
    <button id="NewYork" on-click="putNew" value = "Temperatura">NewYork</button>
  </div>

</template>



<script> 

class Reader extends Polymer.Element {
  static get is() { return 'reader'; }


  static get properties() {
    return {
        saida:{
          type: Array,
          notify: true
        },
        passar:{
          type: Boolean,
          notify:true
        }
      }
  }

  putNew(event)
  {

    var parseTime = (valor)=>{
      let temp= new Date((valor*1000)[phone])
      return temp;
    };

    let formatData = (d) => {
      d.date=parseTime(d.date) 
      if(d.valor!="")
      {
        d.valor = +d.valor;
      }
      else
      {
        d.valor = NaN;
      }
      return d;
    }

    let render = (error, data) => {
      let i = this.saida.length;


      this.push('saida',{data:data, nome: event.path[0].id, tipo:event.path[0].value, cor:i, posEscala:""})
      this.notifyPath('saida.length')
      console.log(this.saida)
      //this.passar=(!this.passar)
    }

    d3.tsv(event.path[0].id+".tsv",formatData,render)

   }
 }
 customElements.define(SomaReader.is, SomaReader);


</script>
</dom-module>

and the following code for my element:

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="reader.html">


<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>

<dom-module id="chartelement">



 <template>

  <soma-reader 
    passar={{passar}}
    saida={{mascara}}
  ></soma-reader>

 </template>



 <script> 

class Chartelement extends Polymer.Element {
  static get is() { return 'chartelement'; }



  static get properties() {
    return {
      mascara:{
        type:Array,
        notify:true,
        observer: '_activeChanged'
      },
      passar:{
        type: Boolean,
        notify:true
      },
    };
  }

 _activeChanged()
 {
  console.log("passei aqui")
 }



}

customElements.define(SomaChartelement.is, SomaChartelement);


</script>
</dom-module>

But when pushing the Reader, a notification is not triggered for the chatelement to perform the _activeChanged function, someone can explain to me why this happens and what needs to be done for the notification to be triggered?

Answer 1

First of all I noticed that you declared a component as reader but at the time of calling in another, you called as soma-reader, I don’t know how it can work like this, leave everything with the same name.

Good, but I believe your problem is that the observer is not working, that’s why when the alteration part of a child component you need to use complex observers, and of course keep the property with notify:true

in your case do the following:

static get properties() {
    return {
      mascara:{
        type:Array,
        notify:true
      },
      passar:{
        type: Boolean,
        notify:true
      },
    };
}

static get observers() {
      return [
        '_activeChanged(mascara.*)'
      ]
}

_activeChanged(){
  console.log("passei aqui")
}

Like property mascara is a array In order for the observer to function when there is a change within the array, an asterisk must be placed next to the property, such as: _activeChanged(mascara.*). But if you want it to work only if you move the whole property, do it: _activeChanged(mascara)