Question

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

HTML：

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

落镖：

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

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

1 个答案: