引用聚合物元素中的值

Question

我正在關注Polymerfire的代碼實例，並修改了一小部分內容，希望更改使用谷歌登錄的登錄元素以使用電子郵件/密碼。

該元素的工作原理，但我一直試圖訪問元素本身之外的電子郵件/密碼字段的值的麻煩。

我以爲我可以通過引用這個。$。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> 

Answer 1

數據，建議綁定 - 看屬性，價值

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