javascript – Polymer 1.0处理动态创建的纸张输入

2023年4月15日 195次阅读

《javascript – Polymer 1.0处理动态创建的纸张输入》

我有一张纸卡.

在其中使用添加按钮,我可以动态添加2纸张输入与检查和删除按钮.

当我点击删除图标时,该行中的输入按钮被删除.

当我点击检查图标时,如何获取在两个纸张输入中输入的数据？

注意**请记住它是动态创建的输入框.

为了添加和删除输入框,我创建了一个带有notify：true的数组,每个remove删除一个索引,每个add都为数组添加一个索引.

帮助我.

添加输入框的代码：

addFood:function(){

			var tempArr=this.foodArray.slice();
			var med= new Object();
			med.name="";
			med.unit="";
			
			tempArr.push(med);

			this.foodArray=tempArr;




},
<paper-card heading= "Food Details">
			<div class="card-content">
<template is="dom-repeat" items="{{foodArray}}" as="food">
														
							<div class="horizontal layout">
								<paper-input  value="[[food.name]]"></paper-input>
								
								<paper-input  value="{{food.unit}}"></paper-input>
								
								<paper-icon-button icon="icons:done" on-click="saveFood"></paper-icon-button>
								
								<paper-icon-button icon="icons:delete" on-click="deleteFood"></paper-icon-button>
							</div>		

				</template>
              /div>
			<div class="card-actions">
				<div class="horizontal layout" >
					<paper-button on-click="addFood">Add</paper-button>
					
				</div>
			</div>
			</paper-card>

最佳答案 这可以通过为您需要查找的每个元素生成唯一ID来获取用户输入值.

在dom-repeat模板中,您应该将id设置为元素.使用基于元素类型的生成id,例如：

  <paper-icon-button id="{{_doneId(item.index)}}" on-click="done">

然后在你的on-click处理程序中,你可以得到目标的id,拉出item.index,生成生成的paper-input元素的id,查找该元素,然后读取值.

您需要为数据模型添加“索引”字段.一个简单的整数索引值就可以了. _doneId函数很简单：

  _doneId: function(index) {
     return "_doneId" + index; 
  }

您需要从单击处理程序中提取索引值并查找其他元素,例如,如下所示：

 done: function(e) {
    var id = e.target.getAttribute("id");
    var index = id.substr(7); // length of "_doneId" prefix
    var inputElem = this.$$("#" + this._inputId(index));
    // then access the inputElem value field, whatever that is
    console.log("the selected input value is: " + inputElem.value);
  }
点赞