2013-10-15 5 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