使用Polymer中的提交制作表单

Question

我正在尝试学习聚合物，我偶然发现了一个来自webcomponents的精彩演示。虽然我不能让它工作。我使用了聚合物启动包选项。在视图1中我想发布一个表单，但是我收到了错误。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu-shared-styles.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<dom-module id="my-view1">
  <template>
  <style include="shared-styles">
  :host {
    display: block;

    padding: 10px;
  }
  </style>

  <div class="card">
    <div class="circle">1</div>
    <h1>View One</h1>
    <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
    <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>

    <form is="iron-form" method="get" action="/" id="basic">
      <paper-input name="name" label="Name" required></paper-input>
      <br>
      <input type="checkbox" name="food" value="donuts" checked> I like donuts<br>
      <input type="checkbox" name="food" value="pizza" required> I like pizza<br>
      <paper-checkbox name="food" value="cheese" required>I like cheese</paper-checkbox><br>
      <paper-dropdown-menu label="Cars" name="cars" required>
        <paper-menu class="dropdown-content">
          <paper-item value="volvo">Volvo</paper-item>
          <paper-item value="saab">Saab</paper-item>
          <paper-item value="fiat">Fiat</paper-item>
          <paper-item value="audi">Audi</paper-item>
        </paper-menu>
      </paper-dropdown-menu>
      <paper-button raised onclick="_submit(event)">Submit</paper-button>
      <paper-button raised onclick="_reset(event)">Reset</paper-button>
      <div class="output"></div>
    </form>


  </div>
</template>

<script>

function _submit(event) {
  Polymer.dom(event).localTarget.parentElement.submit();
}
function _reset(event) {
  var form = Polymer.dom(event).localTarget.parentElement
  form.reset();
  form.querySelector('.output').innerHTML = '';
}
basic.addEventListener('iron-form-submit', function(event) {
  this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});

</script>
</dom-module>