2013-10-15 95 views
1

我嘗試使用鏢獲取從地圖的陣列一些輸入獲得輸入/聚合物:鏢聚合物:無法從陣列

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

形式示出與所有的正確的值很好,但我我無法更改輸入值。我既不能添加也不能刪除輸入字段。

我在做什麼錯?

回答

2

@observable List attrs只是使變量attrs顯而易見。如果您將attr設置爲其他列表,模板將顯示新列表。

= toObservable([]);只是使列表本身可觀察。將新項目添加到列表中將顯示在模板中。它不影響attrs變量或更改列表中的元素。

您需要使您的attribmap可觀察。問題是輸入的值綁定到映射,但雙向數據綁定不起作用,因爲映射中的值不可觀察。改變輸入的值必須觸發觀察者,該觀察者將該值設置回它在地圖中的值。使地圖可觀察將使輸入的值改變地圖中的值。

要使地圖可觀察,請使用您在列表中使用的相同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); 
} 
+0

非常感謝,現在完美工作。這個讓我瘋狂。飛鏢/聚合物是非常有前途的。我很喜歡。但正在大力發展,文件有時不容易找到... – user2884260