javascript - 尝试使用 Polymer paper-toggle-button

Question

抱歉，如果这是一个愚蠢的问题，但我正在尝试弄清楚如何使用 paper-toggle-button 使元素在我的页面上出现/消失。

我可以通过简单地使用 onclick 使其工作，但这显然是不正确/理想的，我无法在网上找到任何使用它的示例(用于 web)。

切换按钮部署(没有 onclick='toggleShow'())为:

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

我试过(但失败了)的脚本是:

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

我敢肯定这是一个有点愚蠢的问题，但如果能帮助我朝着正确的方向前进，我们将不胜感激

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
  }
}); 

上面的代码将检查切换器获得用户交互时触发的“更改”事件，并将检查按钮的状态。

如果你打算在自定义元素中使用它，你可以将它包装在 ready 函数中。你会给切换一个 id(在这种情况下我使用切换)，这样你就可以用 polymer 快速选择来选择它。

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

编辑:在第一次发布时没有注意到 op 使用了 onchange 属性，因此您可以忽略有关事件监听器的部分，只使用 OP 发布的命名函数。只需要纠正逻辑。

第二次编辑:这是一个 plunker，其中包含 on-change 属性和 eventlistener 两种方法的示例。 http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op 在 on-change 上使用了 onchange，这可能是问题的根源。