Вчера вечером немного запутались по поводу идентификаторов проводов, а сегодня то же самое. Я надеюсь, что это станет более понятным после некоторых дополнительных разъяснений и уточнения примера кода:
https://codepen.io/beppe/pen/Vwwmwgx
Для чего предназначен пример кода ниже (и в связанном коде):
Есть пустой массив и пустой текстовый ввод. Когда кто-нибудь вводит текстовый ввод, его значение становится первым элементом массива, а новый пустой пустой текстовый ввод добавляется ниже, чтобы в конечном итоге вставить новый элемент в массив, и так далее. При удалении любого содержимого текстового поля оно «удаляется» из кучи текстовых полей, а его значение удаляется из массива.
Что я заметил, если я использую - array.map ((item) => wire(объект,: прогрессивный идентификатор), чтобы отобразить в документе текстовый ввод для значений, введенных пользователями, а затем другой изолированный провод (тот же объект,: прогрессивный идентификатор), чтобы вставить новый ввод текста (для значения, которое не существует). все еще в массиве)
Результат: пустое текстовое поле, отправляющее событие ввода (вызывающее добавление нового пустого текстового поля), кажется, теряет фокус, и набор текста останавливается.
Если вместо этого я -сохраняйте всегда пустую строку как последний элемент массива и - соединяйте все входы в одну и ту же итерацию array.map
Результат: ввод текста ранее пустого текста продолжается.
Два способа соединения первых двух входов для моего понимания должны быть эквивалентны, но в первом примере это выглядит как пустой ввод, когда-то связанный с массивом .map iteration is - detached и затем добавлено в dom, - или что это другой узел.
Затем, чтобы увидеть, может ли это быть другой узел, я попытался соединить два входных текста, ссылающихся на них, к одному и тому же объекту. - тот же идентификатор (третий столбец в примере). Я ожидал увидеть только один входной текст, так как
«одна и та же ссылка означает точно такой же узел»
, но их два. Я добавил еще 2 ввода текста, используя один и тот же объект в двух разных проводах, и он создал два разных узла. Затем я попытался сделать то же самое, используя array.map, и в итоге я получил только 1 текстовое поле (как я ожидал, что wire сработает).
Надеюсь, понятно, что меня смущает в отношении идентификаторов (и wire).
Если фрагменты строки шаблона одинаковы, ссылочный объект одинаков, почему разное поведение в двух «вводе в пустые примеры ввода»?
Почему существует 2 разных поля вводав других примерах "тот же объект и id - тот же объект"?
Является ли array.map ключом для понимания ??? Что я пропустил?
const bodyRender = hyperHTML.bind(document.body);
const items= [];
const obj={generic:'object'};
function onevent(e) {
const index = parseInt(e.target.dataset.index);
const txtInputValue = e.target.value;
if (index === items.length) {
items.push(txtInputValue);
} else {
if (txtInputValue !== '') {
items[index] = txtInputValue;
} else {
items.splice(index, 1);
}
}
render();
}
const items2= [''];//ugly, ugly ugly workaround
function onevent2(e) {
const index = parseInt(e.target.dataset.index);
const txtInputValue = e.target.value;
if (index === items2.length-1) {
items2[index] = txtInputValue;
items2.push('');
} else {
if (txtInputValue !== '') {
items2[index] = txtInputValue;
} else {
items2.splice(index, 1);
}
}
render();
}
function render()
{
bodyRender`
<div>
1st way (array.map + separate wire)<br>typing is arrested
${items.map((item, index) => hyperHTML.wire(obj, ':i_'+index)`<input type="text" id=${'i_'+index} oninput=${onevent} data-index=${index} value=${item}>`)}
${hyperHTML.wire(obj, ':i_'+items.length)`<input type="text" id=${'i_'+items.length} oninput=${onevent} data-index=${items.length} value="">`}
</div>
<div>
2nd way (all in array map)<br>typing is not arrested
${items2.map((item, index) => hyperHTML.wire(obj, ':i2_'+index)`<input type="text" id=${'i2_'+index} oninput=${onevent2} data-index=${index} value=${item}>`)}
</div>
<div>
<div> ----------------------- </div>
<div>
same obj and same id but 2 nodes
${hyperHTML.wire(obj, ':i3_0')`
<input type="text" id=${'i3_0a'} value=${'i3_0a'}> `}
${hyperHTML.wire(obj, ':i3_0')`
<input type="text" id=${'i3_0b'} value=${'i3_0b'}> `}
</div>
<div>
same obj and no id, but 2 nodes
${hyperHTML.wire(obj, ':i3_0')`
<input type="text" id=${'i3_0c'} value=${'i3_0c'}> `}
${hyperHTML.wire(obj, ':i3_0')`
<input type="text" id=${'i3_0d'} value=${'i3_0d'}> `}
</div>
<div>
same obj and same id in array.map : 1node
${['e','e'].map((item, index)=>hyperHTML.wire(obj, ':i3_0'+item)`
<input type="text" id=${'i3_0e'+index} value=${'i3_0e'+index}> `)}
</div>
<div>
same obj and same id but 2 nodes<br>(simple span elements):<br>
${hyperHTML.wire(obj, ':simple')`<span>a</span>`} |
${hyperHTML.wire(obj, ':simple')`<span>a</span>`}
</div>
<div>
same obj and same id but in array.map <br>(simple span elements):<br>
${['',''].map((item, index)=>hyperHTML.wire(obj, ':supersimple')`<span>a</span>`)}
</div>
`;
}
render()