问题
什么可能导致以下控制台错误?
Uncaught TypeError: this.$.firebaseLogin.login is not a function
解释
我正在尝试实现元素的
<x-login>
演示。<firebase-element>
我直接使用来自官方 Polymer Github 存储库的这个演示中的代码。
我正在将代码直接实现到我的应用程序中(正确的 AFAIK),没有可能引入错误的编辑(我知道)。
代码
进口:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/firebase-elelment/firebase-auth.html">
元素:
Firebase location:
<input value="https://polymer-tests.firebaseio.com" size="40" disabled>
<br>
Provider type:
<select value="{{provider::change}}">
<option>anonymous</option>
<option>facebook</option>
<option>github</option>
<option>google</option>
<option>twitter</option>
<option>password</option>
</select>
<em>Only 'anonymous', 'google', and 'password' are activated for demo Firebase account</em>
<br>
Login params (JSON):
<input value="{{params::input}}" id="params">
<em>Required by some provider types</em>
<br>
<div hidden$="{{computePasswordHidden(provider)}}">
<br><em>Password-specific options:</em><br>
<input placeholder="email" value="{{email::input}}">
<input placeholder="password" value="{{password::input}}">
<button on-tap="createUserHandler" disabled$="{{computeCreateUserDisabled(email, password)}}">Create user</button>
<br>
<input placeholder="new password" value="{{newPassword::input}}">
<button on-tap="changePasswordHandler" disabled$="{{computeChangePasswordDisabled(email, password, newPassword)}}">Change password</button>
<br>
<button on-tap="resetPasswordHandler" disabled$="{{computeResetPasswordDisabled(email, password)}}">Reset password</button>
<button on-tap="removeUserHandler" disabled$="{{computeRemoveUserDisabled(email, password)}}">Remove user</button>
</div>
<br>
<div id="message">[[message]]</div>
<br>
<button on-tap="login" hidden$="{{computeLoginHidden(statusKnown, user)}}">Login</button>
<button on-tap="logout" hidden$="{{computeLogoutHidden(statusKnown, user)}}">Logout</button>
<h3>Login status:</h3>
<p>{{computeLoginStatus(statusKnown, user)}}</p>
<h3>User ID:</h3>
<pre>{{user.uid}}</pre>
</template>
</dom-module>
<script>
Polymer({
is: 'x-login',
properties: {
provider: {
type: String,
value: 'anonymous'
},
message: {
type: String,
value: ''
},
email: {
type: String,
value: ''
},
password: {
type: String,
value: ''
},
user: {
type: Object,
value: null
},
statusKnown: {
type: Boolean
}
},
login: function() {
var params;
try {
params = JSON.parse(this.params);
} catch (e) {
params = null;
}
if (this.provider == 'password') {
params = params || {};
params.email = this.email;
params.password = this.password;
}
this.$.firebaseLogin.login(params);
},
logout: function() {
this.$.firebaseLogin.logout();
},
errorHandler: function(e) {
this.message = 'Error: ' + e.detail.message;
},
userSuccessHandler: function(e) {
this.message = e.type + ' success!';
},
createUserHandler: function(e) {
this.$.firebaseLogin.createUser(this.email, this.password);
},
changePasswordHandler: function(e) {
this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword);
},
resetPasswordHandler: function(e) {
this.$.firebaseLogin.sendPasswordResetEmail(this.email);
},
computePasswordHidden: function(provider) {
return provider !== 'password';
},
computeCreateUserDisabled: function(email, password) {
return !email || !password;
},
computeChangePasswordDisabled: function(email, password, newPassword) {
return !email || !password || !newPassword;
},
computeResetPasswordDisabled: function(email, password) {
return !email || !password;
},
computeRemoveUserDisabled: function(email, password) {
return !email || !password;
},
computeLoginHidden: function(statusKnown, user) {
return !statusKnown || !!user;
},
computeLogoutHidden: function(statusKnown, user) {
return !statusKnown || !user;
},
computeLoginStatus: function(statusKnown, user) {
if (statusKnown && user) {
return 'Logged in';
}
if (statusKnown) {
return 'Logged out';
}
return 'Unknown (checking status...)';
}
});
</script>