我在弄清楚聚合物数据如何与元素主机结合起作用时遇到了问题。我想更改<neon-animated-pages>
元素的选定页面,具体取决于用户是否登录,但我对聚合物完全不熟悉,并且不知道如何使用数据绑定执行此操作。我甚至不能让他们用javascript改变元素内部......
任何帮助都将受到高度赞赏!
我的主要元素看起来像这样:
<template>
<neon-animated-pages id="animated_pages" selected='{{display}}' entry-animation='slide-from-left-animation' exit-animation='slide-right-animation'>
<neon-animatable><login-page loggedIn={{loggedIn}} user={{user}}></login-page></neon-animatable>
<neon-animatable><main-page></main-page></neon-animatable>
<neon-animatable>Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>
</template>
Polymer({
is: 'app-page',
properties: {
signedIn: {
type: Boolean,
notify: true,
value: false,
observer: 'showMain'
},
user: {
type: Object,
notify: true,
}
},
showMain: function(){
this.displayed = 1; <--doesnt seem to work!?!
});
我的<login-page>
元素看起来像这样:
<template>
<firebase-auth
id="auth"
app-name="MyApp"
provider="password"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
<form is="iron-form" id="login_form" class="bottom">
<div>{{signedIn}}</div>
<paper-button id="login_button" on-tap="logIn" raised>Log in</paper-button>
<paper-input id="login_password" name="password" label="password" type="password" on-keyup="_handleEnter" required></paper-input>
<paper-input id="login_email" ></paper-input>
</form>
<template>
<script>
Polymer({
is: 'login-page',
properties: {
signedIn: {
type: Boolean,
notify: true,
},
user: {
type: Object,
notify: true,
}
},
logIn: function() {
var email = this.$.login_email.value
var password = this.$.login_password.value
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(response) {
this.signedIn = true; <--doesn't seem to work!?!
this.user = response;
})
.catch(function(error) {
console.log(error)
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage);
this.signedIn = false;
}.bind(this));
},
});
</script>
答案 0 :(得分:0)
看起来您在绑定中使用了错误的属性名称:
<login-page loggedIn={{loggedIn}}></login-page>
请注意,<login-page>
没有名为“loggedIn”的属性。你可能想要使用“signedIn”。
另请注意,属性绑定使用属性形式的属性名称(dash-case not camelCase)(请参阅docs on Data Binding)。要绑定“signedIn”,您将使用:
<login-page signed-in="{{loggedIn}}"></login-page>
最后,您仅在this
回调中绑定了catch
,但未绑定then
,因此后者的this
不是指您的Polymer对象。修正:
Polymer({
...
logIn: function() {
...
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(response) {
this.signedIn = true;
this.user = response;
}.bind(this)) // bind `this` to the Polymer object
.catch(function(error) {
...
}.bind(this));
})
});