當使用Dart Web UI WebComponents時，是否可以聲明性地綁定CustomEvent處理程序？

我試圖將一個自定義事件處理程序綁定到通過getter公開的EventStreamProvider的WebComponent，但它返回「Class'DivElement'沒有實例getter'onMainAction'」。當使用Dart Web UI WebComponents時，是否可以聲明性地綁定CustomEvent處理程序？

下調組件.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（）完成後使用一個Timer來查詢DOM，因爲在main（）事件循環完成之前，xtags不會被填充。

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

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

通過上述設置，不需要新的CustomEventProvider來監視組件。

來源

2013-05-03 ianmjones

好問題！

我看到一對夫婦的部分這個問題：

使用自定義事件直接在組件上：目前web_ui使用不同的對象來表示您的組件以及它所代表的實際DOM元素。將來，我們計劃直接從「DivElement」擴展而不是「WebComponent」，這將允許您執行您所寫的內容。

同時，如果您想使用組件的主機或影子根目錄，則必須更加明確。在你的榜樣，它似乎像你想的事件連接到主機上，這樣你就需要更多像這樣寫的東西：

Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this.host);
在組件中使用「上成才，富」語法：你可能發現了一個缺陷/缺失的特徵=）。目前，我們以特殊方式處理屬性，並且如果我們確定目標與組件對應，則將它們的值綁定到組件的字段。我們爲值綁定執行此操作，但尚未綁定自定義事件。一種解決方法是添加此功能之前，將查詢您的元素，並用手附上事件：

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

來源

2013-05-03 22:00:23

當使用Dart Web UI WebComponents時，是否可以聲明性地綁定CustomEvent處理程序？

回答

相關問題