다트 웹 UI : 웹 구성 요소 내의 항목에 대한 참조를 얻으려면 어떻게해야합니까?

나는 아래 myapp.html 같이 내 응용 프로그램에 웹 구성 요소의 수를 추가하는 경우 :다트 웹 UI : 웹 구성 요소 내의 항목에 대한 참조를 얻으려면 어떻게해야합니까?

<head> 
    <link rel="components" href="package:xclickcounter/xclickcounter.html"> 
</head> 
<body> 
    <div id="container1"><x-click-counter></x-click-counter></div> 
    <div id="container2"><x-click-counter></x-click-counter></div> 
    <div id="container3"><x-click-counter></x-click-counter></div> 
    <div id="container4"><x-click-counter></x-click-counter></div> 
    ... 
</body>

그리고 아래 xclick-counter.html 같이 내 웹 구성 요소의 번호를 가지고 :

<html><body> 
    <element name="x-click-counter" constructor="CounterComponent" extends="div"> 
    <template> 
     <button id="button1" on-click="increment()">\\\Increment me</button> 
     <button id="button2" on-click="decrement()">Decrement me</button> 
     <span>(click count: {{count}})</span> 
    </template> 
    </element> 
<!-- more below... --> 
</body></html>

myApp.dart의 # container3에있는 웹 구성 요소에서 # button2에 대한 참조를 얻으려면 어떻게해야합니까?

나는 내가 다음과 같이 참조를 얻을 수 있다는 기대하지만 내 참조가 null로 밝혀 :

var reference=document.query('#container1').query('#button2');

출처

2013-05-02 Ken M

일반적으로 그렇게하려고해서는 안된다. :) 그림자 DOM은 캡슐화 경계이며, 사용자 정의 요소의 템플릿 내용은 구현 세부 사항으로 숨겨져 있어야합니다. 클래스와 같은 맞춤 요소를 생각해보십시오. 사용자 정의 요소에 접근하여 그림자 DOM 내부의 노드를보고 싶지 않은 것처럼 클래스에 접근하여 비공개 필드를보고 싶지는 않습니다.

웹 UI는 현재 (사용자 지정 요소 내부에서) ID를 유지하지 않습니다 페이지에서 고유 :

내가 제안을하고 싶습니다,라고 말했다 가졌어요. x-click-counter의 모든 인스턴스에 대해 페이지에는 복제 된 button1 및 button2 요소가 있습니다.

문제를 추적하기 위해 https://github.com/dart-lang/web-ui/issues/492을 열었습니다.

해결 방법은 ID 대신 클래스를 사용하는 것입니다. 그런 다음 코드에서와 같이 호스트 요소에 ID를 부여 할 수 있습니다. 다음으로 변경해보세요.

<element name="x-click-counter" constructor="CounterComponent" extends="div"> 
    <template> 
     <button class="button1" on-click="increment()">\\\Increment me</button> 
     <button class="button2" on-click="decrement()">Decrement me</button> 
     <span>(click count: {{count}})</span> 
    </template> 
    </element>

출처

2013-05-03 04:38:22

대단한 답변을 보내 주셔서 감사합니다. 나는 당신이 제안한 클래스 해결 방법이 내 코드 "reference = document.query ('# container1'). query ('. button2'); ' 여전히 null로 표시됩니다. 결론은 웹 구성 요소를 완전히 캡슐화하지 않고 공용 필드와 동일한 필드와 개인 필드를 필요로한다는 것입니다. –

그림자 DOM에 대한 자세한 내용은 http : http : //www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 더 많은 컨텍스트를 제공 할 수 있습니다. –

자습서 링크를 제공해 주셔서 감사합니다. 캡슐화 된 요소에 액세스하지 않아도되도록 코드를 업데이트했습니다. –

다트 웹 UI : 웹 구성 요소 내의 항목에 대한 참조를 얻으려면 어떻게해야합니까?

답변

관련 문제