2017-07-31 27 views
0

私はPolymerfireのコードラップと最初のちょっとした変化に従っていますが、ログイン要素を変更して電子メール/パスワードを使用するにはgoogleを使用します。ポリマー要素内の値の参照

要素は機能しますが、要素自体の外部にある電子メール/パスワードフィールドの値にアクセスしようとしています。

これを参照して電子メールテキストフィールドの値にアクセスできると思っていましたが、$ .login.email.valueは動作しません。

ここに私のコードは

のログイン要素

<dom-module id="as-login"> 
<template>  
<!-- Here we stick in our login fields --> 
<paper-input id="email" label="Email"></paper-input> 
<paper-input id="password" label="Password" type="password"></paper-input> 

<paper-button id="login" on-tap="signIn" disabled="[[disabled]]"> 
<iron-icon icon="account-circle"></iron-icon> 
<span>Sign in</span> 
</paper-button> 
</template> 
<script> 

Polymer({ 
is: 'as-login', 

properties: { 
disabled: { 
type: Boolean, 
reflectToAttribute: true, 
value: false 
}, 

signedIn: { 
type: Boolean, 
reflectToAttribute: true, 
value: false 
} 
}, 

signIn: function() { 
this.fire('sign-in', null, { bubbles: false }); 
}, 

clearEmail: function() { 
this.$.email.value = ""; 
}, 

clearPassword: function() { 
this.$.password.value = ""; 
}, 

getEmail: function() { 
return(this.$.email.value); 
}, 

getPassword: function() { 
return(this.$.password.value); 
}, 
}); 
</script> 
</dom-module> 

そして、ここでは、app要素

<as-login 
id="login" 
on-sign-in="signIn" 
signed-in="[[signedIn]]" 
disabled="[[!online]]"> 
</as-login> 

<script> 
Polymer({ 
is: 'as-app', 
behaviors: [Polymer.AsAppBehaviour], 
signIn: function() { 
console.log("Let one sign in"); 

// Process sign in promise 
this.$.auth.signInWithEmailAndPassword(this.$.login.getEmail(), this.$.login.getPassword()) 
.then(function(res) { 
console.log("We signed in"); 
}) 
.catch(function(err) { 
console.log("We got an error"); 
}); 
}, 

signOut: function() { 
console.log("Let one sign out"); 
this.$.auth.signOut(); 
} 
}); 
</script> 

答えて

0

データバインディングが推奨されている - の属性を参照してください、値

<paper-input id="email" label="Email" value="{{email}}"></paper-input> 
<paper-input id="password" label="Password" type="password" value="{{password}}"></paper-input> 

の値は、このようなあなたのJSにアクセスすることができます(代わりに、DOMを通じて値にアクセスするの、これ。$。login.email.value)

getEmail: function() { 
    return this.email; 
}, 

getPassword: function() { 
    return this.password; 
}, 
+0

ワンウェイデータバインディングは十分なはずここ – Niklas

+1

でなければなりません電子メールとパスワードのユーザー入力としての2つの方法が必要です。電子メールとパスワードは表示目的のためのものではありません。 –

関連する問題