다트 웹 UI WebComponents를 사용할 때 CustomEvent 핸들러를 선언적으로 바인딩 할 수 있습니까?

Question

getter를 통해 노출 된 EventStreamProvider가있는 WebComponent에 사용자 지정 이벤트 처리기를 바인딩하려고했지만 "클래스 'DivElement'에 인스턴스 getter 'onMainAction'이 없습니다."이 있습니다.

는 ".dart 코드 구성 요소 ...

import 'dart:html'; 
import 'dart:async'; 
import 'package:web_ui/web_ui.dart'; 

class SegmentedButtonsListComponent extends WebComponent { 
    static const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent"); 
    Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this); 
} 

구성 요소의

트림 사용 ... main.dart에서

<x-segmented-buttons-list id="segmented-buttons-list" on-main-action="eventHandler($event)"></x-segmented-buttons-list> 

트림 코드 ...

import 'dart:html'; 
import 'dart:async'; 
import 'package:web_ui/web_ui.dart'; 

const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent"); 

void eventHandler(CustomEvent event) { 
    print(""" 
    Yabba Dabba Doo! 
    Type: ${event.type} 
    Detail: ${event.detail} 
    """); 
} 

void main() { 
    mainActionEvent.forTarget(query('#segmented-buttons-list')).listen(eventHandler); 
} 

을 트림 MainActionEvent "사용자 지정 이벤트가 구성 요소에 의해 디스패치되고 있습니다. 이 "목록"구성 요소 내에서 인스턴스화됩니다.

위의 예제에서 알 수 있듯이 main.dart에서 EventStreamProvider를 만들고 구성 요소를 대상으로 설정하면 잘 동작하지만 구성 요소에서 Stream getter를 무시합니다.

main.dart의 EventStreamProvider를 없애고 단순히 구성 요소의 onMainEvent getter에 바인딩하면 좋을 것입니다.

그럴 수 있습니까?

업데이트 2013년 5월 5일 : Siggi는이 작업을 수행 할 수 없습니다 현재 그 아래에 설명하지만, 요소의 xtag를 통해 구성 요소의 CustomEventProvider의 게터를 참조하는 방법이있다. main() 이벤트 루프가 끝날 때까지 xtags가 채워지지 않아 main()이 완료된 후 Tim을 사용하여 DOM을 쿼리해야한다는 것을 알게되었습니다.

void postMainSetup() { 
    query('#segmented-buttons-list').xtag.onMainAction.listen(eventHandler); 
} 

void main() { 
    Timer.run(postMainSetup); 
} 

위의 설정을 사용하면 구성 요소를 모니터링하는 데 새 CustomEventProvider가 필요하지 않습니다.

Answer 1

좋은 질문입니다!

나는이 질문에 대한 몇 부분을 참조하십시오

• 구성 요소에 직접적으로 사용자 정의 이벤트를 사용 : 현재 web_ui는 구성 요소와 그것이 나타내는 실제 DOM 요소를 나타 내기 위해 다른 개체를 사용합니다. 앞으로는 "WebComponent"대신 "DivElement"에서 직접 확장 할 계획이므로 작성한 작업을 수행 할 수 있습니다.

  한편 구성 요소의 호스트 또는 섀도우 루트를 사용하려면 더 명확하게해야합니다. 당신의 예에서, 호스트에 이벤트를 첨부 할 것처럼 보인다, 그래서 당신은 더 이런 식으로 뭔가를 작성해야합니다 :

  Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this.host);

• 가 구성 요소 '에-가 someting-foo는'구문을 사용하여 : 아마도 버그/누락 된 기능 =을 발견했을 것입니다. 현재 우리는 속성을 특별한 방법으로 처리하고 대상이 구성 요소와 일치하는 경우 해당 값을 구성 요소의 필드에 바인딩합니다. 값 바인딩에 대해서는이 작업을 수행하지만 사용자 정의 이벤트 바인딩에는 아직 적용되지 않습니다.

  query('#host-node').xtag.onMainAction.listen(...);

:이 기능이 추가되기 전에 해결 방법은, 당신의 요소에 대해 질의하고 손으로 이벤트를 첨부 할 것