проблема фокусировки, когда текстовые входы используются в шаблоне повторе

Question

ввода текста вставляются в DOM с помощью итератора повторения вроде следующего:

HTML:

<template repeat="value in listValue"> 
    <input type="text" bind-value="listValue[$index]"> 
</template> 

Dart:

List listValue = toObservable(["value one", "value two"]); 

Проблема с фокусом: когда буква вводится в любом из полей ввода, DOM отображается повторно и фокус теряется. Это связано с focus bug

Как я могу работать?

Answer 1

Проблема фокуса является результатом того, что в настоящее время WebUI рассматривает изменения отдельных записей в списке как общее изменение самого списка, поэтому он повторно отображает весь шаблон-повтор при каждом редактировании. Вы можете получить нужное поведение, добавив один уровень косвенности. Идея здесь состоит в том, чтобы упростить различение изменений в значениях из изменений в списке.

Например, вместо того, чтобы список строковых значений, сделать это список наблюдаемых ссылок на строковые значения, а именно:

HTML:

<template repeat="value in listValue"> 
    <input type="text" bind-value="value.value"> 
</template> 

дротик:

import 'package:web_ui/web_ui.dart'; 
List listValue = toObservable([]); 

void main() { 
    listValue.add(new ObservableReference("value one")); 
    listValue.add(new ObservableReference("value two")); 
}