javascript - 聚合物多铁型提交 Material

Question

我基本上有一个带有自定义搜索表单元素的页面，该元素获取一系列项目，我已经使每个项目都由纸卡表示，并且在这些纸卡上它们有 paper-fab 可以打开自定义纸张-dialog 元素也有一个 iron-form ，就像搜索表单一样，但是在提交租赁对话框时，搜索表单也会提交相同的数据并将对话框响应作为自己的

搜索表单元素

<form id="the-form" is="iron-form" method="POST" action="search.php">
              <paper-radio-group selected="{{brand}}">
              <paper-radio-button name="toyota">Toyota</paper-radio-button>
              <paper-radio-button name="bmw">BMW</paper-radio-button>
              <paper-radio-button name="subaru">Subaru</paper-radio-button>
              <paper-radio-button name="mitsubishi">Mitsubishi</paper-radio-button>
              <paper-radio-button name="nissan">Nissan</paper-radio-button>
              <paper-radio-button name="mazda">Mazda</paper-radio-button>
              <paper-radio-button name="chrysler">Chrysler</paper-radio-button>
            </paper-radio-group>
            <paper-button raised type="submit"  on-click="_submit">Search</paper-button>
          </form>
        </paper-card>
        </div>

        <template is="dom-repeat" id="list" items="{{carItems}}">
          <div id="cards">
          <paper-card class='fancy'>
            <div id="carPage">
      <div class="card-content">
        <div class="title">
          <div class="big">{{item.name}}</div>
          <rent-dialog first-name="{{item.name}}" first-value="{{item.price}}" firstsku="{{item.sku}}" firstavailable="{{computeBool(item.rented)}}"></rent-dialog>
        </div>
      </div>
      <img src="{{item.img}}">
      <div class="card-content">
        <div class="medium">Price:Ksh {{item.price}}</div>
        <div class="medium">{{item.disc}}</div>

      </div>
      </div>
      </paper-card>

       </div>

    </template>

搜索表单脚本

<script>
     'use strict';
      (function() {
        Polymer({
          is: 'search-form',
          properties: {

            brand:      {
              type:       String,
              value:      'toyota'
            }
          },
          listeners:  {
            'iron-form-presubmit': '_formPresubmit',
            'iron-form-submit': '_formSubmit',
            'iron-form-response': '_formResponse',
            'iron-form-error': '_formError'
          },

          _submit: function(event) {
            this.$['the-form'].submit();

          },
          _formPresubmit: function() {
            this.$['the-form'].request.params = { brand: this.brand };
          },

          _formSubmit: function(event) {
            console.log('The form has been submited.', event);
          },
          _formResponse: function(event) {
            this.carItems = event.detail.xhr.response;
            console.log('Form responded:', event.detail.xhr.response);
          },
          computeBool: function(value) {
            return !!Number(value);

          }

        });
      })();
    </script>

租金对话框元素

<paper-fab icon="shopping-cart" title="{{firstSku}}" on-click="hire" disabled="{{firstavailable}}"></paper-fab>
        <paper-dialog  modal role="alertdialog" id="dialog"><p>[[item.name]]</p>
        <h2>Reciept</h2>
        <form id="rent" is="iron-form1" method="POST" action="rented.php">

        <span class="paper-title" name="carName">Name: [[firstName::input]] </span> <br>
        <span name="sku">SKU: [[firstSku::input]]</span> <br>
        <span name="price">Price Per Day: KSH [[firstValue]]</span> <br>
        <span>Number Of Days:</span>
        <paper-slider min="1" max="10" editable pin value="{{sliderValue}}" on-change="sliderChange" name="days"></paper-slider>
        <span>Total Price: Ksh <span id="price" name="totalPrice"></span></span>

        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button type="submit" on-click="_rent" dialog-confirm>Rent</paper-button>

        </form>
        </paper-dialog>

对话框脚本

<script>
        (function() {
          Polymer({
            is:    'rent-dialog',
            properties: {
          firstValue:Number,
          firstName:String,
          firstsku:Number,
          firstavailable:Number
        },
       listeners:  {
              'iron-form-submit': '_rentSubmit',
              'iron-form-response': '_rentResponse',
            },
        _rent: function(event1) {
              this.$.rent.submit();
            },
            _rentSubmit: function(event1) {
              console.log('The form has been submited.', event);
            },
            _rentResponse: function(event1) {
              console.log('Form responded:', event.detail.xhr.response);

            },

            hire:function(evt) {
              // Because we are in a dom module, this.$ registers tags with an ID.
              this.$.dialog.toggle();

            },
            sliderChange:function(e){
              var value = (this.sliderValue);
              var value2 = (this.firstValue);
              var total = value*value2;
               document.getElementById("price").innerHTML = total;
           },
           submit:function(r){
             console.log("clicked");
           }

          });
        })();
      </script>

Answer 1

在您的顶级元素中，您正在监听iron-form 事件。请记住，对话框触发的事件将会冒泡，并且也会被顶级元素监听器捕获。

作为解决方案，您可以查找事件的发起者:在事件监听器中，查看 event.details 属性。