Polymer 1.x：<paper-toggle-botton> VALUE 未关闭

Question

I can't get the value of the <paper-toggle-button> element to toggle to the "off" value using <iron-form>.serialize(). Although the visual rendering does appear to toggle to the "off" position.

我做错了什么？

Here is a link to the JSBin demo.

单击演示中的切换按钮以查看它们的值。
每个按钮的开头值设置为 "off."
第一次点击每个按钮将值设置为"on."
在切换 "on."
每个切换按钮的视觉呈现都按预期工作。

http://jsbin.com/ruzuwaqiyi/edit?html,输出

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-toggle-button {
        display: block;
        margin-bottom: 40px;
      }
    </style>
    <form is="iron-form" id="form">
      <p>Click each button to view the values.</p>
      <paper-toggle-button name="foo" on-change="handle">foo</paper-toggle-button>
      <paper-toggle-button name="bar" on-change="handle">bar</paper-toggle-button>
      <paper-toggle-button name="baz" on-change="handle">baz</paper-toggle-button>
      <paper-toggle-button name="bat" on-change="handle">bat</paper-toggle-button>
      <p>See how the values never toggle back to "off?"
    </form>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element',
        handle: function() {
          alert(JSON.stringify(this.$.form.serialize()));
        }
      });
    })();
  </script>
</dom-module>
</body>
</html>

Answer 1

我想我会改用 <paper-checkbox> 元素。 JSBin

http://jsbin.com/dewixacagu/edit?html,输出

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-checkbox {
        display: block;
        margin-bottom: 40px;
      }
    </style>
    <form is="iron-form" id="form">
      <p>Click each button to view the values.</p>
      <paper-checkbox name="foo" on-change="handle">foo</paper-checkbox>
      <paper-checkbox name="bar" on-change="handle">bar</paper-checkbox>
      <paper-checkbox name="baz" on-change="handle">baz</paper-checkbox>
      <paper-checkbox name="qux" on-change="handle">qux</paper-checkbox>
      <p>See how the values toggle back to "off" now?</p>
    </form>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element',
        handle: function() {
          alert(JSON.stringify(this.$.form.serialize()));
        }
      });
    })();
  </script>
</dom-module>
</body>
</html>

Polymer 1.x：<paper-toggle-botton> VALUE 未关闭

Polymer 1.x: <paper-toggle-botton> VALUE doesn't toggle off

polymer

paper-elements

polymer-1.0