具有 ajax 请求的 Polymer 1.0 计算变量

Question

我正在尝试根据 ajax 调用计算聚合物变量，另一个变量为属性。

例如，我想像这样传递一个变量：

<my-custom-element user-email="test@test.com"></my-custom-element>

然后在 <my-custom-element> 模板上计算另一个名为 exists 的布尔变量，并使用对我服务器的用户列表的 ajax 请求填充它。

当我尝试常规 ajax 呼叫时，我什么也没得到...

 Polymer({
  is: "my-custom-element",

  properties: {
    userEmail: {
      type: String,

    },
    exists: {
      type: Boolean,
      computed: '_getExistsFromEmail(userEmail)'
    }
  },
  _getExistsFromEmail: function(userEmail) {
    var xhr = new XMLHttpRequest();

    xhr.open('POST',
        encodeURI('http://api.test.im/land_emails'));
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var that = this;
    xhr.onload = function () {
      var responseJson = JSON.parse(xhr.responseText);

      if (xhr.status === 200 || xhr.status === 201) {
        if (responseJson.status) { // If user exists

          return true;

        }
        else { // User does not exists
          return false;
        }

      }

    };

    var params = "email=" + userEmail;
    xhr.send(encodeURI(params));
  }})

这不起作用，变量未定义。我怎样才能让它成为可能？是吗？

Answer 1

这里的问题是因为ajax回调是异步的。当 ajax 调用完成时，将触发您在此函数 xhr.onload = function () { 中定义的内容。此处返回 true 或 false 不具有将 return 值分配给 exists 的效果。相反，_getExistsFromEmail 的 return 值被分配给 exists，这是未定义的。而且由于异步性，也不可能像那样定义它。但是，您可以按如下方式实现您想要的（假设您的 ajax 代码按预期工作）。

Polymer({
    is: "my-custom-element",

    properties: {
        userEmail: {
          type: String
        },
        exists: {
          type: Boolean,
        }
    },

    observers: ['_getExistsFromEmail(userEmail)'],

    _getExistsFromEmail: function(userEmail) {
        var xhr = new XMLHttpRequest();

        xhr.open('POST',
            encodeURI('http://api.test.im/land_emails'));
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        var that = this;
        xhr.onload = function () {
          var responseJson = JSON.parse(xhr.responseText);

          if (xhr.status === 200 || xhr.status === 201) {
            if (responseJson.status) { // If user exists

              this.exists = true;

            }
            else { // User does not exists
               this.exists = false;
            }

          }

        }.bind(this);

        var params = "email=" + userEmail;
        xhr.send(encodeURI(params));

    }
});

每当 userEmail 发生变化时，都会调用 _getExistsFromEmail。在那里，只要收到 ajax 响应，就会更新 exists。

具有 ajax 请求的 Polymer 1.0 计算变量

Polymer 1.0 computed variable with ajax request

polymer

polymer-1.0