javascript - polymer 3.0 数据绑定(bind)

Question

我无法理解 polymer 中数据绑定(bind)的工作原理。我已经检查了文档和之前的一些问题，但仍然:

我有一个宿主元素和一个子元素。 child 是一个注册/登录页面，它向 api 发送 ajax 请求并注册新用户或接收用户 token 。用户数据(名称和 token 保存在 storedUser 对象的元素属性中。我需要的是父元素(MyApp)可以看到这个 storedUser 对象。

非常感谢任何有助于理解的帮助。

主持人(简体):

class MyApp extends PolymerElement {
    static get template() {
        return html`
        <div>{{Here needs to be some data from storedUser from child element}}</div>
        <register-login name="register-login" some-props={{storedUser}}></register-login>
      `;
    }
    ...
    static get properties() {
        return {
            page: {
                type: String,
                reflectToAttribute: true,
                observer: '_pageChanged'
            },
            routeData: Object,
            subroute: Object,
            user: {
                type: Object,
                notify: true
            }
        };
    }
    ...
}

child :

class RegisterLogin extends PolymerElement {
    static get template() {
      return html`

        <div class="card">
        <div id="unauthenticated" hidden$="[[storedUser.loggedin]]">
          <h1>Log In</h1>

          <p>
            <strong>Log in</strong> or
            <strong>sign up</strong> to access!</p>
        <template is="dom-if" if="[[error]]">
            <p class="alert-error"><strong>Error:</strong> [[error]]</p>
        </template>
          <paper-input-container>
            <label slot="input">Username</label>
            <iron-input slot="input" bind-value="{{formData.username}}">
              <input id="username" type="text" value="{{formData.username}}" placeholder="Username">
            </iron-input>
          </paper-input-container>

          <paper-input-container>
            <label>Password</label>
            <iron-input slot="input" bind-value="{{formData.password}}">
              <input id="password" type="password" value="{{formData.password}}" placeholder="Password">
            </iron-input>
          </paper-input-container>

          <div class="wrapper-btns">
            <paper-button raised class="primary" on-tap="postLogin">Log In</paper-button>
            <paper-button class="link" on-tap="postRegister">Sign Up</paper-button>
          </div>
        </div>
        <div id="authenticated" hidden$="[[!storedUser.loggedin]]">
          <h2>Hello, [[storedUser.name]]!</h2>
          <p>You are now logged in. You can access <a href="[[rootPath]]secret-content">Secret Content</a>!</p>
        </div>
      </div>
      `;
    }

    static get properties() {
      return {
        formData: {
          type: Object,
          value: {}
        },
        storedUser: Object,
        error: String
      }
    }

    handleUserResponse(event) {
      var response = JSON.parse(event.detail.response);

      if (response.id_token) {
        this.error = '';
        this.setProperties(
          {
            storedUser: {
              name: this.formData.username,
              id_token: response.id_token,
              access_token: response.access_token,
              loggedin: true
            },
          }
        )
      }
      // reset form data
      this.formData = {};
    }

    handleUserError(event) {
      this.error = event.detail.request.xhr.response;
    }
  }

Answer 1

我假设您这里的代码是一个简化版本，除了 storedUser 之外一切正常。

storedUser 不更新 MyApp 中值的原因是因为它是一种向下绑定(bind)方式(从 MyApp 到 RegisterLogin)。

要修复它，我们可以将 storedUser 设置为两种绑定(bind)方式，在 RegisterLogin 中进行的更改是:

class RegisterLogin extends PolymerElement {
    // ...
    static get properties() {
      return {
        // ...
        storedUser: { type: Object, value: {}, notify: true },

      }
   }
}