Trying to use the Polymer Paper button

Question

Sorry if this is a stupid question, but I'm trying to figure out how to use paper-toggle-buttonit so that the item appears / disappears on my page.

I can make it work just by using onclick, but this is obviously not correct / perfect, and I cannot find any examples on the Internet that it uses (for the Internet).

The switch button is deployed (without onclick='toggleShow'()) as:

<paper-toggle-button onchange={{toggleShow}} checked></paper-toggle-button>

script I tried (and failed):

function toggleShow() {
  if (checked: false) {
    chart.hide('upload'); //this works with onclick
  } else {
    chart.show('upload');
  }
}

I'm sure this is a bit of a dumb question, but any help to get me moving in the right direction would be greatly appreciated

Answer 1

var toggle = document.querySelector("paper-toggle-button");
toggle.addEventListener('change', function () {
  if (this.checked) {
    // do something if when checked
  } else {
    // do something if not checked
  }
}); 

"", , .

, . toggle id ( toggle), .

ready: function () {
  this.$.toggle.addEventListener('change', function () {
    if (this.checked) {
      // do something if when checked
    } else {
      // do something if not checked
    }
  }); 
}

edit: , op onchange, OP. .

second edit: on-change , eventlistener. http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op, , , , .

Answer 2

, - , :

<paper-toggle-button checked="{{showChart}}"></paper-toggle-button>

<div id="chart" hidden$="[[!showChart]]">...</div>

Answer 3

This should work:

<paper-toggle-button on-change="toggleShow" checked></paper-toggle-button>