聚合物数据绑定到主机

Question

我在弄清楚聚合物数据绑定到元素宿主的工作原理时遇到了问题。我想根据是否登录的用户更改 <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>

Answer 1

您似乎在绑定中使用了错误的属性名称：

<login-page loggedIn={{loggedIn}}></login-page>

请注意 <login-page> 没有名为 "loggedIn" 的属性。您可能打算使用 "signedIn".

另请注意，属性绑定使用属性形式的属性名称（破折号而不是驼峰式）（参见 docs on Data Binding）。要绑定 "signedIn"，您将使用：

<login-page signed-in="{{loggedIn}}"></login-page>

最后，您只在 catch 回调中绑定了 this 而不是 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));
  })
});

聚合物数据绑定到主机

Polymer data binding to host

web-component

polymer

polymerfire