作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想从 Polymer 元素内部触发/发送/发出自定义事件。例如,我想将像“changed”这样的普通 DOM 事件转换为像“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>
最佳答案
第1步
捕获 <input>
上的更改事件.请注意 on-change
以下。
<!-- from inside todo_item.html -->
<input type="checkbox" checked="{{item.done}}" on-change="{{change}}">
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
事件处理程序。每当复选框状态发生变化时,就会运行该方法。
void change(Event e, var details, Node target) {
dispatchEvent(new CustomEvent('todochange'));
}
<template repeat="{{item in items}}" >
<li is="todo-item" class="{{item.doneClass}}" item="{{item}}" on-todochange="todoChanged"></li>
</template>
on-todochange
的使用.
关于dart - 如何从 Polymer Dart 触发自定义事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18971511/
我是一名优秀的程序员,十分优秀!