Polymer 1,0 Handling динамически создаваемые устройства подачи бумаги

Question

У меня есть бумаги-карта.

В котором с помощью кнопки «Добавить» я могу динамически добавлять 2 бумажных ввода с кнопкой «Проверка» и «Удалить».

Когда я нажимаю на значок удаления, кнопка ввода в этой строке удаляется.

Как я могу получить данные, введенные в два ввода бумаги, когда я нажимаю значок проверки?

Примечание ** Помните, что это динамически создаваемые поля ввода.

Для добавления и удаления полей ввода я создал массив с уведомлением: true и каждый удаляет удаляет индекс, и каждый добавляет добавляет индекс в массив.

Помогите мне в этом.

код для добавления полей ввода:

addFood:function(){ 
 

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

 
\t \t \t this.foodArray=tempArr; 
 

 

 

 

 
},

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

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

Answer 1

Это может быть сделано путем создания уникального идентификатора для каждого элемента, что вам нужно для поиска, чтобы вытащить из пользовательского ввода значений.

Внутри шаблона dom-repeat вы должны установить id элементов. Используйте сгенерированный идентификатор на основе типа элемента, например:

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

Тогда в вашем на кнопку обработчика вы можете получить идентификатор цели, вытащить item.index, генерировать идентификатор генерируемого бумажно введите элемент, найдите этот элемент, а затем прочитайте значение.

Вам нужно добавить поле «индекс» к вашей модели данных. Простое значение индекса целых чисел. Функция _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 остается неизменным. В дополнение к решению удалить, я упростил добавить решение для вас, так что он использует методы полимер нажимные для соответствующих уведомлений элементов:

Script для пользовательского элемента:

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

Один из способов может быть, если введенные данные включаются в качестве настраиваемых атрибутов для кнопки done.

(вам нужно немного перестроить массив ввода и поместить каждый объект в его собственном уникальный идентификатор)

<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 
} 

....

Другой способ решить это, чтобы считать, что привязка данных Полимера составляет dynamic.

Вы говорите, что «Для добавления и удаления полей ввода, я создал массив ...», хорошо в одних и тех же массива данных будет обновляться по мере изменения его формы, как:

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

Обратный вызов «saveFood» должен искать объект «Картофель» в массиве «med». Для более точного поиска вы можете использовать некоторый идентификатор для отметки каждого объекта, а затем выполнить поиск по этому идентификатору.