dart - 在模板重复中使用文本输入时的焦点问题

Question

输入文本使用可迭代的重复插入到 DOM 中，如下所示：

HTML：

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

镖：

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

焦点存在问题：当在任何输入字段中键入字母时，DOM 会重新显示并且焦点会丢失。这是由于焦点错误

我怎么能有这个工作？

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"));
}