0
做我基本上都用它獲取項目的陣列的自定義搜索表單元素的網頁時，我做了每個項目由紙卡和他們的紙卡紙 - 表示晶圓廠其打開其中有一個鐵的形式以及就像搜索表單自定義紙張對話元素，但是在提交租賃的對話中搜索形式也提交了相同的數據，並作爲其自身的對話響應聚合物多鐵表單提交
搜索表單元素
<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>