2014-08-29 45 views
1

我很高兴能够开始使用纸质元素,但我在表单元素提交方面遇到了一些问题。在以下情况:是否有相当于纸张输入的提交?

<!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)后,我是否会得到一个要触发的事件,但它会触发两次!改变从SimonmynameEdwin和压制之后进入:

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 

回答

0

什么工作对我来说是过滤上输入(如上),并改变了我的结合inputValue而不是value

<paper-input inputValue="{{myname}}" floatinglabel="true" label="enter your name" on-keypress="{{nameSubmitted}}"></paper-input> 

虽然我对这个解决方案并不满意(因为纸质元素的验证功能我失败了),所以我肯定愿意接受更好的答案。