Я обновил свой образец полимера на GitHub. В нем показаны два обсуждаемых подхода: Eventbus-Based (уже был там) и новый подход DOM-Event. (Тот, который я предпочитаю - гораздо чище)
Работа образец (хром)
https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/index.html
Код:
https://github.com/MikeMitterer/DART-Sample-PolymerHelloWorld/tree/master/web
Некоторые подробности о том, что я сделал:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="hello-world/hello-world.html">
<link rel="import" href="event-handler/event-handler.html">
<link rel="import" href="stopwatch/stopwatch.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
<body>
<h1>Hi first world!</h1>
<!-- event-handler should show some events coming in from hello-world -->
<event-handler>
<hello-world></hello-world>
</event-handler>
<script src="packages/browser/dart.js"></script>
</body>
</html>
привет-world.html
Элемент, который запускает событие, если нажать «огонь событие» -Кнопка. Это также может быть ошибка, сообщение об ...
<!DOCTYPE html>
<polymer-element name="hello-world">
<template>
<button on-click="{{increment}}">Click Me</button>
<button on-click="{{fireevent}}">Fire an event (received by event-handler)</button>
<p>Hello from inside a custom element! Clicks: {{count}}</p>
</template>
<script type="application/dart" src="hello-world.dart"></script>
</polymer-element>
привет-world.dart
import 'package:polymer/polymer.dart';
import 'package:event_bus/event_bus.dart';
import 'package:PolymerHelloWorld/globaleventbus.dart';
import 'dart:html';
import 'dart:math';
import 'package:json/json.dart' as JSON;
@CustomTag('hello-world')
class HelloWorldElement extends PolymerElement {
final EventBus _eventbus = new GlobalEventBus();
@observable int count = 0;
HelloWorldElement.created() : super.created();
void increment(Event e, var detail, Node target) {
count += 1;
_eventbus.fire(GlobalEventBus.basicClickEvent,"Test");
}
void fireevent(Event e, var detail, Node target) {
final Random random = new Random();
final Map json = { 'response' : 'Hi, this is a message', 'random' : random.nextInt(100)};
// Fires a JSON-Message
fire("hello-event",detail: JSON.stringify(json));
}
}
обработчика событий.HTML Шаблон, который получает "привет-событие"
<!DOCTYPE html>
<polymer-element name="event-handler" on-hello-event="{{handleHelloEvent}}">
<template>
<style>
.error { color: red; }
</style>
<p class="error">EventHandler (Shows hello-world events!) Message: {{response}}, Random number: {{randomnumber}}</p>
<content></content>
</template>
<script type="application/dart" src="event-handler.dart"></script>
</polymer-element>
EVENT-handler.dart Реализует handleHelloEvent, определенный в соответствии шаблон
import 'package:polymer/polymer.dart';
import 'package:json/json.dart' as JSON;
@CustomTag('event-handler')
class EventHandler extends PolymerElement {
@observable String response = "";
@observable int randomnumber = 0;
EventHandler.created() : super.created();
void handleHelloEvent(Event e, var detail, Node target) {
final Map json = JSON.parse(detail);
response = json['response'];
randomnumber = json['random'];
// Log to console
print("Received event! $detail");
}
}
Вот именно - если вы знаете, как это работает - так же просто, как пирог!
ИМХО было бы лучше, чтобы расширить/улучшить свой вопрос, вместо того, чтобы комментировать. Я только что увидел, что ты уже опустился. см. Также мой расширенный ответ –
EventBus был/является моим планом B - я просто подумал, что в полимер должно быть что-то встроенное, которое поддерживает обработку исключений по границам элементов - кажется, не так. BTW Я использую этот EventBus: http://pub.dartlang.org/packages/event_bus - работает хорошо. –
Пример EventBus, с которым я связан, является упрощенной версией этого пакета EventBus (код имеет ссылку на репозиторий GitHub). Полимер больше предназначен для создания автономных элементов/виджетов, а не структуры приложения, поэтому отсутствует такая функциональность. –