중첩 된 폴리머 맞춤 구성 요소 데이터 바인딩

Question

하위 구성 요소에서 상위 구성 요소로, 그리고 하위 구성 요소로 왕복하는 데 데이터를 가져올 수 없습니다.

나는 간단한 중첩 구성 요소 테스트 베드를 만들었습니다. 이것은 텍스트 입력 (X)을 취하고 (입력 직후 P)를 밖으로 에코

<link rel="import" href="../packages/polymer/polymer.html"> 

<polymer-element name="child-comp" attributes="x y"> 
    <template> 
    <input type='text' value='{{x}}'/> 
    <p>-x={{x}}-</p> 
    <p>list: 
     <template repeat='{{y}}'>-{{ }}-</template> 
    </p> 
    </template> 

    <script type='application/dart'> 
    import 'package:polymer/polymer.dart'; 

    @CustomTag('child-comp') 
    class ChildComp extends PolymerElement { 
     @observable var x; 
     @observable var y; 

     ChildComp.created() : super.created(); 
     } 
    </script> 
</polymer-element> 

: 여기 자식이다. 또한 x를 자식 컨트롤에서 반복하여 자식 컨트롤에서 반복해야하는 목록 (y)에 추가합니다. 여기

는 부모 구성 요소입니다

<link rel="import" href="../packages/polymer/polymer.html"> 
<link rel="import" href="../components/child_comp.html"> 

<polymer-element name="top-comp"> 
    <template> 
    <child-comp x='{{s}}' y='{{t}}'></child-comp> 
    </template> 

    <script type='application/dart'> 
    import 'package:polymer/polymer.dart'; 

    @CustomTag('top-comp') 
    class TopComp extends PolymerElement { 
     @observable String  s = '1234'; 
     @observable List<String> t = ['A', 'B', 'C']; 

     TopComp.created() : super.created(); 

     sChanged(oldVal, newVal) { 
     t.add(newVal); 
     } 
     } 

    </script> 
</polymer-element> 

아이부터 부모의 작품과 변화는 올바르게 목록에 추가됩니다. 그러나 목록은 자식에게 전달되지 않는 것처럼 보입니다. DOM은 결코 업데이트되지 않습니다.

는 내가 장식의 가능한 모든 조합을 시도했다, 그러나 아마 대답은

보조 노트 .. 바인드 = 구문의 변형에 있습니다 데코레이터에 대한 권위있는 업데이트 된 설명서가? 검색은 다양한 고대의 참고 문헌을 보여줍니다.

Answer 1

문제를 올바르게 이해하면 List뿐만 아니라 해당 요소도 관찰 할 수 있어야합니다.

@observable List<String> t = toObservable(['A', 'B', 'C']); 

이 방법은, t의 요소에 대한 변경 (대신 그냥 t 자체)이다 "발표", 그리고 DOM 그에 따라 업데이트 할 수 있습니다 : 당신은 다음과 같이 수행 할 수 있습니다.