1

我尝试使用 dart/polymer 从一组地图中获取一些输入：

@CustomTag('attrib-form')
class AttribForm extends PolymerElement  {
   @observable List attrs = toObservable([]);
   created() {
       super.created();
   }

   init(attrs) {
      this.attrs = attrs;
   }

}

<!DOCTYPE html>
<polymer-element name="attrib-form">

    <template if="{{attrs.length>0}}">

        <template repeat="{{attr in attrs}}">
            <div>
            <div>{{attr['name']}}</div>
              <input id="{{attr['name']}}" type="text" value="{{attr['value']}}">
            </div>
        </template>
    </template>
    <script type="application/dart" src="attrib_form.dart"></script>

</polymer-element>


main() {
    var attrib = [
        {"name": "name", "value": "a"}, 
        {"name": "type", "value": "b"}, 
        {"name": "width","value": "c"}];
    var form = createElement('attrib-form');
    var x = form.xtag; 
    x.init(attrib);
}

表单显示所有正确值都很好，但我无法更改输入值。我既不能添加也不能从输入字段中删除。

我究竟做错了什么？

4

1 回答 1

2

@observable List attrs只是使变量attrs可观察。如果您设置attr为不同的列表，模板将显示新列表。

= toObservable([]);只是使列表本身可观察。将新项目添加到列表中将显示在模板中。它不会影响attrs变量或列表中元素的更改。

你需要让你的attrib map可观察的。问题是输入的值绑定到地图，但是双向数据绑定不起作用，因为地图中的值是不可观察的。更改输入的值必须触发观察者，该观察者将值设置回地图中的值。使地图可观察将使输入的值改变地图中的值。

要使地图可观察，toObservable()请使用您在列表中使用的相同功能。

import "package:observe/observe.dart";

int main()
    var attrib = toObservable([
        {"name": "name", "value": "a"}, 
        {"name": "type", "value": "b"}, 
        {"name": "width","value": "c"}]);
    var form = createElement('attrib-form');
    var x = form.xtag; 
    x.init(attrib);
}
于 2013-10-16T02:21:40.683 回答