Notifications in polymer

Question

Notifications in polymer

Navigation

#1 by (0 votes)

0

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)+10800000)
      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 in the reader, there is no trigger for chatelement to run the _activeChanged function, can someone explain why this happens and what needs to be done for the notification to be triggered?

javascript polymer

asked by anonymous 02.03.2018 / 12:41

1 answer

What is the "important" statement for? Paste External Site URL Text

score 0 · Answer 1

First of all I noticed that you have declared a component as reader but when it comes to calling another, you have called it as soma-reader , I do not know how this can work like this, leave everything with the same name.

Well, but I believe your problem is that the viewer is not working, that's why when you change part of a child component you need to use complex viewers , 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")
}

Since the mascara property is a array for the observer to work when it changes inside the array, you must place an asterisk next to the property, such as: _activeChanged(mascara.*) . But if you want it to work only if you change the entire property, do: _activeChanged(mascara)