Dart의 dom에있는 웹 구성 요소 인스턴스에 액세스 할 때 문제가 있습니까?

"color-item"이라는 웹 구성 요소를 생성하고이를 html에 사용자 정의 요소 태그를 추가하는 동안 인스턴스화했습니다. 또한 나는 다음과 같은 요소를 제공합니다.Dart의 dom에있는 웹 구성 요소 인스턴스에 액세스 할 때 문제가 있습니까?

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item> 
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

구성 요소가 잘 나타나고 예상대로 동작합니다. 그러나 다트 코드를 사용하여 재미있는 일을하기 위해 (메인 루프의) 요소에 액세스하려고하면 오류가 발생합니다. 저는 여기에 액세스하기 위해 시도하는 방법이다 :

다음과 같은 오류가 발생

ColorItem color_Item1 = query("#colorItem1").xtag; 
    ColorItem color_Item2 = query("#colorItem2").xtag;

Breaking on exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.

I'we는이 같은 캐스팅 시도 :

비슷한을 생산

ColorItem color_Item1 = query("#colorItem1").xtag(ColorItem); 
    ColorItem color_Item2 = query("#colorItem2").xtag(ColorItem);

오류 :

Exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'. 
    Breaking on exception: Class 'DivElement' has no instance method 'call'.

구성 요소 자체는 다음과 같이 정의된다 :

<!DOCTYPE html> 
    <html> 
    <body> 
    <element name="color-item" constructor="ColorItem" extends="div"> 
    <template> 

    <style scoped> 

     .color-box{ 
      cursor:pointer; 
      padding:20px;    
      margin:10px; 
      margin-left:0px; 
      display:inline-block; 

      width:auto; 
      height:auto; 
      position: relative; 
      font-size: 24px; 
      color:white; 
      background-color:orange; 
      border-radius:24px; 
      box-shadow: 2px 2px 10px rgba(0,0,0,0.2); 
      user-select: none; 
     } 

    </style> 

    <div class="color-box" style="background-color:{{bg_color}}; color:{{text_color}}" on-click="swapColor()"> Color: <b>{{color_text}}</b> </div> 
    </template> 
    <script type="application/dart" src="ColorItem.dart"></script> 
    </element> 
    </body> 
    </html>

및 구성 요소에 대한 스크립트는 다음과 같습니다

import 'package:web_ui/web_ui.dart'; 

    class ColorItem extends WebComponent { 
     @observable 
     String color_text ="orange"; 

     @observable 
     String bg_color ="orange"; 

     @observable 
     String text_color ="white"; 

     @observable 
     ColorItem next_color_item =null; 




     List<String> colors = new List<String>() 
     ..add("LimeGreen") 
     ..add("green") 
     ..add("yellow") 
     ..add("OrangeRed") 
     ..add("red") 
     ..add("purple") 
     ..add("blue"); 


    int i = 0; 


    String getNextColor(){ 
     i++; 
     i%=colors.length; 
     return colors[i]; 
    } 

    void swapColor(){ 
     String oldColor = bg_color; 
     String nextColor = getNextColor(); 
     bg_color = nextColor; 
     color_text = nextColor; 
     if(next_color_item!=null){ 
     next_color_item.bg_color = oldColor; 
     next_color_item.color_text = oldColor; 
    } 

    } 
    }

어떤 제안?

출처

2013-06-25 MrMambo007

문제는 사용자 지정 요소는 아직 "위해서 업그레이드"되지 않았 음을, 그래서 xtag이 제대로 설정되어 있지 않습니다. 당신이보고있는 특정 오류는 이상하다고 생각합니다. 왜냐하면 xtag이 DivElement이 아닌 null이 될 것이기 때문입니다.

이 시도하고 그것이 작동하는지 확인 :

Timer.run(() { 
    ColorItem color_Item1 = query("#colorItem1").xtag; 
    ColorItem color_Item2 = query("#colorItem2").xtag; 
});

출처

2013-06-26 17:06:55

그건 저스틴에게 효과가 있었어! :) 그러나 어떻게 든 마술처럼 보입니다 ... 나는 타이머가 콜백 코드가 언제 실행 가능한지 알 수 있고 그것을 실행하는 방법을 알지 못합니다. 그냥 반복해서 시도합니까? 또는 요소가 "업그레이드 된"시기에 대한 알림을 구독 할 수 있습니까? 뒤에있는 마법을 이해하고 싶습니다. – MrMambo007

나는 또한 이것을 내 코드에서 시도해 보았고, 객체에는 차이가있다. Timer가없는 div이지만 Timer가있는 ColorItem입니다. 코드가 비동기식 대기열에 배치되고 주 프로세스에 완전히 초기화 할 기회가 주어지기 때문에 @Justin은 이것입니까? – Allan

@ MrMambo007 앨런의 이론은 정확합니다. main() 내에서 Timer.run을 사용하면 main() 루프가 끝날 때까지 익명 함수에서 코드를 실행하는 것을 지연합니다. 현재 web_ui는 main() 루프가 완료 될 때까지 요소의 xtag를 초기화 할 수 없습니다. 내 웹 구성 요소의 사용자 지정 이벤트 처리기에 바인딩 할 때 비슷한 문제가 발생했습니다. http://stackoverflow.com/questions/16362148/is-it-possible-to-declaratively-bind-a-customevent-handler-when-using-dart-web-u. – ianmjones

;

<color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></color-item> 
<color-item id="colorItem2" color_text="green" bg_color="YellowGreen" ></color-item>

<div is="x-color-item" id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" ></div> 
<div is"x-color-item" id="colorItem2" color_text="green" bg_color="YellowGreen" ></div>

와

및

<element name="x-color-item" constructor="ColorItem" extends="div">

와

<element name="color-item" constructor="ColorItem" extends="div">

교체하고 주에 다음과 같은 코드를 사용하려고;

var color_Item1 = query("#colorItem1").xtag; 
    print(color_Item1.attributes); 
    color_Item1.attributes.forEach((k,v){ 
    print('$k :: $v'); 
    }); 
var color_Item2 = query("#colorItem2").xtag;

출처

2013-06-25 17:25:54 Allan

감사합니다,하지만 아무것도 변경되지 :

<color-item on-load='onLoadHandler($event)' />

는 다음 주에, 핸들러를 예견. 같은 오류 메시지. "ColorItem color_Item1 = query ("# colorItem1 ") .xtag (ColorItem);"을 실행하면 앱이 다운됩니다. line – MrMambo007

내 게시물을 업데이트로 편집했습니다. 나는 변수가 DivElement라고 생각하지만, var은 그것을 작동하게 만들 것이다.최신 업데이트에서 사용한 스 니펫을 사용해보십시오. – Allan

테스트하지,하지만 당신이 시도 할 수? 제안 앨런에 대한

void onLoadHandler(Event event) { 
    DivElement theDiv = event.currentTarget as DivElement; 
    // then the xtag 
    theDiv.xtag.doSomethingVeryFunky(); 
}

출처

2013-06-26 17:13:55

Dart의 dom에있는 웹 구성 요소 인스턴스에 액세스 할 때 문제가 있습니까?

답변

관련 문제