Question

我有一张纸卡。

使用添加按钮，我可以动态添加2个纸张输入，并带有检查和删除按钮。

当我点击删除图标时，该行中的输入按钮将被删除。

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

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

为了添加和删除输入框，我创建了一个带有notify：true的数组，每次删除都会删除一个索引，每次添加都会为数组添加一个索引。

帮助我。

添加输入框的代码：

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>

Answer 1

这可以通过为需要查找的每个元素生成唯一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);
  }

Answer 2

我相信你要做的是，当点击删除时，从列表中删除正确的项目。这是通过在事件中使用单击按钮时的模型来完成的。这是事件处理程序在模板重复中的结果。 Explained here。 HTML保持不变。除了删除解决方案之外，我还为您简化了添加解决方案，以便它使用聚合物推送方法进行正确的元素通知：

自定义元素的脚本：

 addFood:function(){
    this.push('foodArray',{name:"",unit:""});
 },
 deleteFood:function(e){
    this.splice('foodArray',e.model.index,1);
 },
 saveFood:function(e) {
    // Save food from array with index: e.model.index
    // Data is accessible via this.foodArray[index], or just the current row: e.model.food.*
 },

A working sample is here.

Answer 3

一种方法是，如果输入的数据作为自定义属性包含在完成按钮中。

（您需要稍微重新组织输入数组，并将每个对象放入其自己的唯一ID中）

<paper-icon-button
            id='some_unique_id'
            icon="icons:done" 
            on-click="saveFood"
            name="{{food.name}}"
            unit="{{food.unit}}">
</paper-icon-button>

然后获取自定义属性值：

saveFood: function(e, detail, source) {

         var name = source.getAttribute('name');
         //use 'name' here
 }

...

其他解决方法是考虑到Polymer的数据绑定是dynamic。

你说＆＃34;为了添加和删除输入框，我创建了一个数组......＆＃34;，同样的数组数据将在表单中更改时更新，如下：

"med":[
    {"id_1":{"name":"Potato", "unit":"2kg"}}, 
    ...
  ]

下一步＆＃34; saveFood＆＃34;回调需要搜索“马铃薯”＃39; ＆＃39; med＆＃39;中的对象阵列。要获得更准确的搜索，您可以使用一些id来标记每个对象，然后按该ID进行搜索。

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

3 个答案: