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不具有将返回值赋给exists的效果。而是将_getExistsFromEmail的返回值分配给exists，而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)); } });未定义。而且由于异步性，它也不可能像那样定义它。但是，您可以按照以下方式实现所需（假设您的ajax代码按预期工作）。

userEmail

每当_getExistsFromEmail更改时，都会调用exists。在那里，只要收到ajax响应，就会更新{{1}}。

Polymer 1.0使用ajax请求计算变量

1 个答案: