Polymer.dart를 사용하여 동적으로 추가 된 맞춤 요소 내부에서 그림자 DOM 조작

이 최소 폴리머 앱에는 '트랙'을 포함하는 '브라우저'가 있습니다. 브라우저는 render을 해당 트랙에 호출 할 수 있어야합니다. 트랙이 렌더되면 그림자 DOM에 노드 <p>이 새로 추가됩니다.Polymer.dart를 사용하여 동적으로 추가 된 맞춤 요소 내부에서 그림자 DOM 조작

render이 호출되면 ParagraphElement가 만들어지고 부모 "div # insert-here"가 문제없이 발견되지만 새로 만든 ParagraphElement를 div의 자식에 추가하면 브라우저에 렌더링되지 않습니다. 우리가 enteredView 동안 ExampleBrowser의 그림자 DOM에 새로운 <p>를 삽입하는 코드를 변경하는 경우

는, 브라우저에서 <p> 나타납니다 예상대로. 왜 최상위 맞춤 요소가 작동하지만 동적으로 생성 된 맞춤 요소는 작동하지 않습니까?

bugTest.dart

import 'package:polymer/polymer.dart'; 
import 'dart:html'; 

@CustomTag('example-browser') 
class ExampleBrowser extends PolymerElement { 
    @published ExampleTrack track; 

    ExampleBrowser.created() : super.created(); 

    @override 
    void enteredView() { 
     track = new Element.tag('example-track') 
     ..trackName = "Test Track"; 
    } 

    void renderTrack(MouseEvent e) { 
     track.render(); 
    } 
} 

@CustomTag('example-track') 
class ExampleTrack extends PolymerElement { 
    @published String trackName; 

    ExampleTrack.created() : super.created(); 

    void render() { 
     ParagraphElement testParagraph = new ParagraphElement() 
     ..text = "I don't seem to get added to the DOM :("; 
     $['insert-here'].children.add(testParagraph); 
    } 
    }

맞춤 elements.html

<script type="application/dart" src="bugTest.dart"></script> 

<polymer-element name="example-browser"> 
    <template> 
    <h2>Browser</h2> 
    <button on-click="{{renderTrack}}">Render tracks</button> 
    <example-track trackName={{track.trackName}}></example-track> 
    </template> 
</polymer-element> 

<polymer-element name="example-track"> 
    <template> 
    <h3>{{trackName}}</h3> 
    <div id="insert-here"></div> 
    </template> 
</polymer-element>

index.html을

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>BugTest</title> 
    <link rel="import" href="custom-elements.html"> 
    <script type="application/dart">export 'package:polymer/init.dart';</script> 
    <script src="packages/browser/dart.js"></script> 
    </head> 
    <body> 
    <h1>BugTest</h1> 
    <example-browser></example-browser> 
    </body> 
</html>

출처

2014-02-13 Rob Syme

나는 요소 목록을 반복하는 것이 효과가 있다고 생각하지 않는다.

모델 데이터를 반복해야합니다. 코드가 무엇을

는 마크 업 당신이 그것을 참조하지 않기 때문에 당신의 tracks 목록의 내용 (항목 수 옆에) 완전히 무시됩니다

<template repeat="{{track in tracks}}"> 
    <example-track></example-track> <!-- this element is created tracks.lenght times --> 
</template>

입니다. @observable List tracks = [1, 2, 3, 4, 5];

ExampleTrack의 attached() 대신 render()으로 전화해야합니다.

에 당신이 당신의 tracks 목록에서 데이터를 얻을이 방법 당신의

<template repeat="{{track in tracks}}"> 
    <example-track someattribute="{{track.aField}}"></example-track> 
</template>

당신이 당신의 생성 ExampleTrack의에서 업데이트를 트리거 바운드 모델 값 (tracks[0].aField = 'someNewValue';)을 변경하고 ExampleTrack 뭔가를 할 수 있도록하려는 경우 ExampleTrack을 생성 in void someattributeChanged(old) { /* do something */ }

여러분은 신경 써야합니다. tracks 그리고 그 안의 요소와 필드는 관찰 가능해야합니다. [dart] observable을 검색하면 충분한 예제가 있어야합니다.

출처

2014-02-13 07:21:50

빠른 응답을 보내 주셔서 감사합니다. 실제 응용 프로그램에서 반복되는 템플릿 내부에서 인스턴스화 된 요소는 각 트랙 인스턴스에서 가져온 속성을가집니다. 필요에 따라 트랙을 다시 렌더링 할 수 있기를 바랍니다. 문제는 단일 인스턴스 사용 여부에 관계없이 지속되는 것으로 보입니다. 이 점을 명확하게하기 위해 질문을 편집했습니다. –

답변을 업데이트했습니다. 당신은 정말로 당신의 접근 방식을 재고해야합니다, 그것은 폴리머가 작동하는 방식이 아닙니다. –

에 스팟이 있습니다. void attributeChanged (old) {whatever}는 내가 원했던 것을 얻는 * 더 * 좋은 방법입니다. 감사합니다 귄터! –

Polymer.dart를 사용하여 동적으로 추가 된 맞춤 요소 내부에서 그림자 DOM 조작

답변

관련 문제