我想從聚合物元素內部發射/發送/發射自定義事件。例如，我想將一個正常的DOM事件（比如「changed」）轉換爲一個更像「todoupdated」的語義事件。如何從聚合物飛鏢開啓自定義事件？

這是我有HTML：

<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>

我要上覆選框泡沫變更事件出來的東西更多...有用的自定義元素的。 :)

來源

2013-09-24 Seth Ladd

步驟1

捕獲的<input>變化事件。請注意下面的on-change。

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

步驟2

處理在包含複選框定製元素代碼的變化的事件。

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 
    } 
}

請注意change事件處理程序。該方法在複選框狀態發生變化時運行。

第3步

發送自定義事件。

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

注意：自定義事件名稱不能包含破折號。

步驟4

在父定製元素中偵聽自定義事件。

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

請注意使用on-todochange。

享受！

來源

2013-09-24 01:21:51

我覺得「todoChanged」應爲「{{todoChanged }}」。 –

我想知道是否可以直接從元素中引發事件，而不是調用實例方法來執行它... –

聚合物，它簡化了觸發事件

一個輔助方法

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

附加信息：
爲了讓那些想添加一個偵聽程序

// 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');

訂閱提供給用戶的事件事件以編程方式而不是聲明式：

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

來源

2014-03-15 13:07:12

我管理這個使用<core-signals>和聚合物輔助方法fire。通過這種方式，您可以收聽非兒童元素髮起的事件。 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" }); 
    } 
}

那麼任何用戶只是要做到這一點

subscriber.html

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

subscriber.dart

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

來源

2015-01-20 11:11:57 Hector

如何從聚合物飛鏢開啓自定義事件？

回答

步驟1

步驟2

第3步

步驟4

相關問題