다른 PolymerElement에서 다트 PolymerElement의 중첩

Question

다트 PolymerElement에서 중첩하려고 시도했습니다 다른 PolymerElement 이와 같습니다.

@CustomTag('test-box') 
class Box extends PolymerElement{ 
    @observable List<Child> childs = new List<Child>(); 

    Box.created() : super.created() { } 
} 

@CustomTag('test-child') 
class Child extends PolymerElement{ 
    Child.created() : super.created() { } 
} 

하고 testbox.html

<link rel="import" href="testchild.html"> 
<polymer-element name="test-box"> 
    <template> 
    <div> 
     <ol name="child-list"> 
     <template repeat="{{child in childs}}"> 
      {{child}} 
     </template> 
     </ol> 
    </div> 
    </template> 
    <script type="application/dart" src="testbox.dart"></script> 
</polymer-element> 

에

다트/중합체 가능한가? 내 모든 시도는 실패합니다. 클래스와 같은 html 노드를 처리하고 싶습니다.

미리 감사

Answer 1

에서 당신이 출판 속성을 통해 자식 요소에 데이터를 전달하는 모델 객체를 사용할 수 있습니다.

확인이 예 : https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/observable_objects_inside_list_changes

Answer 2

당신은 예를 들어, 상자로 아이들에게 노드를 추가 할 수 있습니다

@CustomTag('test-box') 
class Box extends PolymerElement{ 
@observable List<Child> childs = new List<Child>(); 

    Box.created() : super.created() { 

    } 

    void _addChildren(List<Child> children) { 
     children.forEach((Child c) { 
      this.children.add(c); 
     } 
    } 

    @override void attached() { super.attached(); _addChildren(childs); } 
} 

그런 다음 당신은 어레이의 변경 사항을 반영하기 위해 observable API를 사용하여 차일의 변경 사항을 모니터링 할 수 있습니다 .

Child 개체는 new Element.tag("test-child")으로 만들어야합니다.

그러나 IMHO는 가장 순수한 MVC 접근 방식을 사용하여 @Leksat에서 제공하는 최상의 솔루션입니다.

Answer 3

나는 거의 같은 문제가 있었고 어떤 종류의 프록시 요소를 사용하여 해결했다. ProxyElement 다트 코드 :

library ProxyElement; 

import 'package:polymer/polymer.dart'; 

@CustomTag('proxy-element') 
class ProxyElement extends PolymerElement { 

    @published PolymerElement target; 

    ProxyElement.created() : super.created(); 

    attached() { 
    shadowRoot.querySelector('#proxy').append(target); 
    } 

} 

그리고 HTML 코드 :

는

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

<polymer-element name="proxy-element"> 
    <template> 
    <style> 
     :host { 
     display: inline; 
     } 
    </style> 

    <template if="{{target == null}}"> 
     No target element defined. 
    </template> 
    <template if="{{target != null}}"> 
     <div id="proxy"></div>  
    </template> 
    </template> 
    <script type="application/dart" src="proxy_element.dart"></script> 
</polymer-element> 

사용법 :

... 
<template repeat="{{child in children}}"> 
    <proxy-element target="{{child}}"></proxy-element> 
</template> 
...