Question

我尝试使用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);
}

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

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

我做错了什么？

Answer 1

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

dart聚合物：无法从阵列输入

1 个答案: