我很高兴开始使用纸质元素,但我在提交表单元素时遇到了一些问题。在下面的:
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<polymer-element name="c2button-element">
<template>
<paper-input value="{{myname}}" floatinglabel="true" label="enter your name" on-change="{{nameSubmitted}}"></paper-input>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('c2button-element')
class C2Button extends PolymerElement {
@observable String myname = "Simon";
void nameSubmitted(Event e, var detail, Node target) {
print("Being called with event $e for $myname");
}
C2Button.created() : super.created();
@override void attached() { super.enteredView(); }
@override void detached() { super.leftView(); }
}
</script>
</polymer-element>
我想要的输入行为是按
enter
或模糊输入以调用 nameSubmitted
每次。实际发生的是,只有在更改 myname
的值之后(这并不奇怪,因为我已经注册到 on-change
),我是否会触发一个事件,但它会触发 两次 !更改后myname
来自 Simon
至Edwin
并按回车:Being called with event Instance of 'CustomEvent' for Edwin
Being called with event Instance of 'Event' for Edwin
我需要做其他事情吗,比如注册
on-keypress
并过滤回车键?我对此的第一次尝试仍然遇到类似的两次调用问题。第一次按回车,myname
仍然包含旧值,好像纸输入还没有提交新值 - 这是由于验证吗?<paper-input value="{{myname}}" floatinglabel="true" label="enter your name" on-keypress="{{nameSubmitted}}"></paper-input>
void nameSubmitted(KeyboardEvent e, var detail, Node target) {
if (e.keyCode != 13) {return;}
print("Being called with event $e for $myname");
}
改成
Edwin
后并按两次回车:Being called with event Instance of 'KeyboardEvent' for Simon
Being called with event Instance of 'KeyboardEvent' for Edwin
最佳答案
对我有用的是过滤输入(如上)并将我的绑定(bind)更改为 inputValue
而不是 value
:
<paper-input inputValue="{{myname}}" floatinglabel="true" label="enter your name" on-keypress="{{nameSubmitted}}"></paper-input>
不过,我对这个解决方案并不满意(我失去了纸质元素的验证功能),所以我当然愿意接受更好的答案。
关于dart - 是否有相当于提交纸质输入的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25574604/