Question

我在理解聚合物中数据绑定的工作方式时遇到了麻烦。我已经检查了文档和以前的一些问题，但仍然：

我有一个主机和一个子元素。子级是一个注册/登录页面，该页面向api发送一个ajax请求，并注册一个新用户或接收该用户的令牌。用户数据（名称和令牌保存在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
            }
        };
    }
    ...
}

孩子：

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中的值的原因是因为它是向下绑定（从MyApp到RegisterLogin）的一种方式。

要解决此问题，我们可以通过两种方式使storedUser绑定，在RegisterLogin中进行的更改是：

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

      }
   }
}

聚合物3.0数据绑定

1 个答案: