Ich möchte ein benutzerdefiniertes Ereignis innerhalb eines Polymer-Elements auslösen. Zum Beispiel möchte ich ein normales DOM-Event wie "changed" in ein semantischeres Event wie "todoupdated" konvertieren.Wie feuere ich ein benutzerdefiniertes Ereignis von Polymer Dart?

Dies ist der HTML-Code, ich habe:

<polymer-element name="todo-item" extends="li" attributes="item"> 
    <template> 
    <style> 
     label.done { 
     color: gray; 
     text-decoration: line-through; 
     } 
    </style> 
    <label class="checkbox {{item.doneClass}}"> 
     <input type="checkbox" checked="{{item.done}}"> 
     {{item.text}} 
    </label> 
    </template> 
    <script type="application/dart" src="todo_item.dart"></script> 
</polymer-element>

ich die Änderungsereignisse auf Checkbox Blase will aus dem benutzerdefinierten Elemente als etwas mehr ... nützlich. :)

Quelle

2013-09-24 Seth Ladd

Schritt 1

Capture the Änderungsereignisse auf dem <input>. Beachten Sie die on-change unten.

<!-- from inside todo_item.html --> 
<input type="checkbox" checked="{{item.done}}" on-change="{{change}}">

Schritt 2

die Ereignisänderung Griff in dem benutzerdefinierten Elementcode, der die Checkbox enthält.

import 'package:polymer/polymer.dart'; 
import 'dart:html'; 
import 'models.dart'; 

@CustomTag('todo-item') 
class TodoItemElement extends PolymerElement with ObservableMixin { 
    @observable Item item; 

    bool get applyAuthorStyles => true; 

    void change(Event e, var details, Node target) { 
    // do stuff here 
    } 
}

Beachten Sie die 10 Event-Handler. Diese Methode wird jedes Mal ausgeführt, wenn sich der Markierungsfeldstatus ändert.

Schritt 3

Verteilen Sie ein benutzerdefiniertes Ereignis.

void change(Event e, var details, Node target) { 
    dispatchEvent(new CustomEvent('todochange')); 
    }

HINWEIS: Der benutzerdefinierte Ereignisname darf keine Bindestriche enthalten.

Schritt 4

für das benutzerdefinierte Ereignis Hören Sie in einem benutzerdefinierten Element Elternteil.

<template repeat="{{item in items}}" > 
     <li is="todo-item" class="{{item.doneClass}}" item="{{item}}" on-todochange="todoChanged"></li> 
    </template>

Beachten Sie die Verwendung von on-todochange.

Viel Spaß!

Quelle

2013-09-24 01:21:51

zu tun, denke ich "todoChanged sein" sollte „{{todoChanged }} ". –

Ich frage mich, ob es möglich ist, ein Ereignis direkt vom Element auszulösen, anstatt eine Instanzmethode dafür aufzurufen ... –

Polymer hat eine Hilfsmethode, die

// dispatch a custom event 
this.fire('polymer-select', detail: {'item': item, 'isSelected': isSelected});

Zusatzinfo Feuerungsereignisse vereinfacht:
Um das Ereignis zur Verfügung Teilnehmer, die einen Zuhörer programmatisch

// getter 
async.Stream<dom.CustomEvent> get onPolymerSelect => 
    PolymerSelection._onPolymerSelect.forTarget(this); 

// private EventStreamProvider 
static const dom.EventStreamProvider<dom.CustomEvent> _onPolymerSelect = 
    const dom.EventStreamProvider<dom.CustomEvent>('polymer-select');

abonnieren Sie hinzufügen möchten das Ereignis programmgesteuert statt deklarativ:

($['#ps'] as PolymerSelect) // get the children and cast it to its actual type 
    .onPolymerSelect.listen((e) => print(e['isSelected'])); // subscribe

Quelle

2014-03-15 13:07:12

Ich schaffte dies mit <core-signals> und die Polymer-Helfer-Methode fire. Auf diese Weise können Sie Ereignisse abhören, die von Elementen ausgelöst werden, die keine Kinder sind. source.

todochange.html

<!doctype html> 

<polymer-element name="todo-item" extends="li"> 
    <template> 
    <style> 
     label.done { 
     color: gray; 
     text-decoration: line-through; 
     } 
    </style> 
    <label class="checkbox {{item.doneClass}}"> 
     <input type="checkbox" checked="{{item.done}}"> 
     {{item.text}} 
    </label> 
    </template> 
    <script type="application/dart" src="todo_item.dart"></script> 
</polymer-element>

todochange.

import 'package:polymer/polymer.dart'; 
import 'dart:html'; 

@CustomTag('todo-item') 
class TodoItemElement extends PolymerElement { 
    @observable Item item; 

    void change(Event e, var details, Node target) { 
    // the name is the name of your custom event 
    this.fire("core-signal", detail: { "name": "todochange" }); 
    } 
}

dart Dann jeder Teilnehmer hat nur dieses

... 
<link rel="import" href="packages/core_elements/core_signals.html> 
... 
<template> 
    <core-signals on-core-signal-todochange="{{handleToDoChange}}"></core-signals> 
... 
</template>

subscriber.dart

subscriber.html

@CustomTag("subscriber") 
class Sub extends PolymerElement { 
    ... 
    void handleToDoChange(Event e, var detail, Node target) { 
    print("Got event from <todo-item>"); 
    } 
    ... 
}

Quelle

2015-01-20 11:11:57 Hector

Wie feuere ich ein benutzerdefiniertes Ereignis von Polymer Dart?

Antwort

Schritt 1

Schritt 2

Schritt 3

Schritt 4

Verwandte Themen