Question

我得到一个错误：未捕获的ReferenceError：form1中没有定义在HTMLElement.onclick

如果将表单放置在dom模块之外，则可以在index.html主体中使用，但是如何访问projet-app模块内部的表单？

index.html

<link rel="import" href="projet-app.html">
<style>
 body {
     margin: 0;
     width: 100%;
     height: 100%;
     font-family: sans-serif;
 }
</style>   </head>   <body>
<projet-app></projet-app>
   </body> </html>

·PROJET-app.html

<projet-pouchdb name="projet-films"
          initsrc="films.json"
          films="{{elements}}"
          id="db">
</projet-pouchdb>

<app-header reveals effects="waterfall">
  <app-toolbar class="layout horizontal">
    <div class="projet-app-title">Webcomponents: liste de films et séries</div>
    <span class="flex"></span>
    <paper-button class="toolbar-button" on-tap="_supprimer">Supprimer le film</paper-button>
    <paper-button class="toolbar-button" on-tap="_ajout">Ajout</paper-button>
    <paper-button class="toolbar-button" on-tap="_reset">Reset</paper-button>
  </app-toolbar>
</app-header>

<container id="containerFilm" class="layout horizontal">
  <projet-film-list id films="{{elements}}"></projet-film-list>

  <div id="ajoutFilm">
    <iron-form  name="form1">
      <form method="get">
        <paper-input id="test" name="titreF" label="Titre du film" value="testbordel"></paper-input>
        <paper-input name ="createurF" label = "Créateur(s)"></paper-input>
        <paper-input name ="acteursF" label = "Acteurs"></paper-input>
        <paper-input name ="saisonsF" label = "Saison(s)"></paper-input>
        <paper-input name ="anneeF" label = "Année(s)"></paper-input>
        <paper-input name ="synopsisF" label = "synopsis"></paper-input>
      </form>
      <br>
      <div class="output"></div>
    </iron-form>
  </div>
  <paper-button raised onclick="form1.submit()" on-tap="_ajout">Submit</paper-button>

class ProjetApp extends Polymer.Element{
  static get is(){return "projet-app";}
  static get properties(){
    return{
      elements:{
        type: Array,
        notify: true
      }
    }
  }

  _supprimer() {this.$.db._supprimer_film();}

  //_supprimer() {this.$.db._supprimer_films();}

  _ajout() {
    form1.addEventListener('iron-form-submit', function(event) {
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    titreF=String(event.detail.titreF);
    createurF=String(event.detail.createurF);
    acteursF=String(event.detail.acteursF);
    saisonsF=String(event.detail.saisonsF);
    anneeF=String(event.detail.anneeF);
    synopsisF=String(event.detail.synopsisF);
    console.log("titreF"+titreF);
    console.log("createurF"+createurF);
    console.log("acteursF"+acteursF);
    console.log("saisonsF"+saisonsF);
    console.log("anneeF"+anneeF);
    console.log("synopsisF"+synopsisF);
    });
    this.$.db._ajout_films();
  }

  _reset() {this.$.db._reset_films();}

    ready(){
      super.ready();
      //console.log("ProjetApp ready");
   }
    constructor(){
       super();
       //console.log("ProjetApp created");
   }
  };
  customElements.define(ProjetApp.is,ProjetApp);   </script> </dom-module>

我该如何解决？我想这可以是阴影-DOM相关的问题？

编辑：由于behzad besharati，此代码已解决问题

·PROJET-app.html

<projet-pouchdb name="projet-films"
          initsrc="films.json"
          films="{{elements}}"
          id="db">
</projet-pouchdb>

<app-header reveals effects="waterfall">
  <app-toolbar class="layout horizontal">
    <div class="projet-app-title">Webcomponents: liste de films et séries</div>
    <span class="flex"></span>
    <paper-button class="toolbar-button" on-tap="_supprimer">Supprimer le film</paper-button>
    <paper-button class="toolbar-button" on-tap="_ajout">Ajout</paper-button>
    <paper-button class="toolbar-button" on-tap="_reset">Reset</paper-button>
  </app-toolbar>
</app-header>

<container id="containerFilm" class="layout horizontal">
  <projet-film-list id films="{{elements}}"></projet-film-list>

  <div id="ajoutFilm">
    <iron-form id="form1" name="form1">
      <form is="iron-form" method="get" action="/form/handler">
        <paper-input name="titreF" label="Titre du film" value="testitre" required></paper-input>
        <paper-input name ="createurF" label = "Créateur(s)"></paper-input>
        <paper-input name ="acteursF" label = "Acteurs"></paper-input>
        <paper-input name ="saisonsF" label = "Saison(s)"></paper-input>
        <paper-input name ="anneeF" label = "Année(s)"></paper-input>
        <paper-input name ="synopsisF" label = "synopsis"></paper-input>
      </form>
      <br>
      <div class="output" style="display:none;" width="100px;"></div>
    </iron-form>
    <paper-button on-tap="submitForm">Submit</paper-button>
  </div>

class ProjetApp extends Polymer.Element{
  static get is(){return "projet-app";}
  static get properties(){
    return{
      elements:{
        type: Array,
        notify: true
      }
    }
  }

  _supprimer() {this.$.db._supprimer_film();}

  //_supprimer() {this.$.db._supprimer_films();}

  _reset() {this.$.db._reset_films();}

  ready(){
    super.ready();
    //console.log("ProjetApp ready");
  }
  constructor(){
     super();
     //console.log("ProjetApp created");
  }

   submitForm(e) {
       this.$.form1.submit();
       this.$.form1.addEventListener('iron-form-submit', function(event) {
       this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
       titreF=event.detail.titreF;
       createurF=event.detail.createurF;
       acteursF=event.detail.acteursF;
       saisonsF=event.detail.saisonsF;
       anneeF=event.detail.anneeF;
       synopsisF=event.detail.synopsisF;
     });
     if(titreF!=""){
       this.$.db._ajout_films();
       }
   }
  };
  customElements.define(ProjetApp.is,ProjetApp);

如何提交铁表格并获得铁输入值？

0 个答案: