Tôi muốn kích hoạt/gửi/phát ra một sự kiện tùy chỉnh từ bên trong một phần tử Polymer. Ví dụ: tôi muốn chuyển đổi một sự kiện DOM bình thường như "đã thay đổi" thành một sự kiện ngữ nghĩa hơn như "todoupdated".Làm cách nào để kích hoạt sự kiện tùy chỉnh từ Polymer Dart?

Đây là HTML mà tôi có:

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

Tôi muốn các sự kiện thay đổi trên hộp kiểm để bong bóng ra của phần tử tùy chỉnh như một cái gì đó nhiều hơn ... hữu ích. :)

Nguồn

2013-09-24 Seth Ladd

Bước 1

Ghi lại sự kiện thay đổi trên <input>. Hãy chú ý đến số on-change bên dưới.

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

Bước 2

Xử lý sự kiện thay đổi trong mã yếu tố tùy chỉnh có chứa các hộp kiểm.

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

Lưu ý change trình xử lý sự kiện. Phương thức đó sẽ chạy bất cứ khi nào trạng thái hộp kiểm thay đổi.

Bước 3

Gửi sự kiện tùy chỉnh.

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

LƯU Ý: tên sự kiện tùy chỉnh không được chứa dấu gạch ngang.

Bước 4

Nghe sự kiện tùy chỉnh trong phần tử tùy chỉnh gốc.

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

Lưu ý việc sử dụng on-todochange.

Tận hưởng!

Nguồn

2013-09-24 01:21:51

Tôi nghĩ rằng "todoChanged" nên được "{{todoChanged }} ". –

Tôi tự hỏi liệu có thể kích hoạt sự kiện trực tiếp từ phần tử thay vì gọi một phương thức thể hiện để làm điều đó ... –

Polymer có một phương thức helper mà đơn giản hoá bắn kiện

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

Thông tin thêm:
Để thực hiện các sự kiện dành cho thuê bao mà muốn thêm một người biết lắng nghe trình

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

đăng ký sự kiện theo chương trình thay vì được khai báo:

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

Nguồn

2014-03-15 13:07:12

Tôi đã quản lý điều này bằng cách sử dụng <core-signals> và phương pháp trợ giúp polymer fire. Bằng cách này bạn có thể nghe các sự kiện được bắn từ các yếu tố không phải là trẻ em. 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.phi tiêu

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" }); 
    } 
}

Sau đó, bất kỳ thuê bao chỉ cần có để làm điều này

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>"); 
    } 
    ... 
}

Nguồn

2015-01-20 11:11:57 Hector

Làm cách nào để kích hoạt sự kiện tùy chỉnh từ Polymer Dart?

Trả lời

Bước 1

Bước 2

Bước 3

Bước 4

Các vấn đề liên quan