Question

我有一个聚合物元素，我想将一个标记作为标题属性。

当我按下按钮时，会发送XMLHttpReqeust。负责的iron-ajax元素具有带有字符串的headers属性。我想更改字符串，并应用不同的属性。

我被告知正常compound bindings不起作用，我应该尝试computed bindings或computed properties。

但问题似乎是问题，如何bind这些computed properties或computed bindings iron-ajax元素？

每当我使用花括号时，都不会评估任何内容。如果我把它们留下来，只会解析剩下的字符串。

这是我的元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="demo-element">
    <template>
        <button on-click="sendXMLHttpRequest">sendXMLHttpRequest</button>

        <div>
            Computed Binding HeadersProperty: 
            <span>{{computeHeadersProperty(csrfToken)}}</span>
        </div>
        <div>
            Computed Property HeadersProperty: 
            <span>{{headersProperty}}</span>
        </div>
        <div>
            Computed Binding HeadersToken: 
            <span>{{computeHeadersToken(csrfToken)}}</span>
        </div>
        <div>
            Computed Property HeadersToken: 
            <span>{{headersToken}}</span>
        </div>

        <iron-ajax
             id="ajax"
             method="POST"
             url=""
             handle-as="json"
             headers='{"X-CSRF-Token": "csrfToken"}'
             ></iron-ajax>

    </template>
    <script>
        Polymer({
            is: 'demo-element',

            properties: {
                csrfToken: {
                    type: String,
                    value: 'aBcDeF'
                },
                headersProperty: {
                    type: String,
                    computed: 'computeHeadersProperty(csrfToken)'
                },
                headersToken: {
                    type: String,
                    computed: 'computeHeadersToken(csrfToken)'
                }

            },

            sendXMLHttpRequest: function () {
                // ajax call
                this.$.ajax.body = this.headersProperty;
                this.$.ajax.generateRequest();
            },

            computeHeadersProperty: function (csrfToken) {
                return '{"X-CSRF-Token":\"' + csrfToken + '\"}';
            },

            computeHeadersToken: function (csrfToken) {
                return csrfToken;
            }
        });
    </script>
</dom-module>

正如您所看到的，我已经为完整的headers属性创建了计算绑定和属性，并且还为我想要传递的令牌创建了。

但是当我使用大括号时，铁-ajax元素不会评估任何东西。

以下是我到目前为止在iron-ajax元素中尝试过的内容：

headers ='{“X-CSRF-Token”：“{{csrfToken}}”}'//不评估
headers ='{“X-CSRF-Token”：“{{headersToken}}”}'//不评估
headers =“{{headersProperty}}”//不评估
headers =“{{computeHeadersProperty（csrfToken）}}”//不评估
headers ='{“X-CSRF-Token”：“{{computeHeadersToken（csrfToken）}}”}'//不评估
headers ='{“X-CSRF-Token”：“headersToken”}'//评估到{"X-CSRF-Token": "headersToken"}
headers ='computeHeadersProperty（csrfToken）'//不评估

那么，我如何将属性绑定到headers元素的iron-ajax属性？

修改

有些用户提供了“工作解决方案”，但遗憾的是无法正常工作，因为似乎设置了headers，但headers request中未包含x-csrf-token。证明：

将此与我们使用随机字符串的情况进行比较：

此处iron-ajax已正确设置。

因为无法在提供的JSBIN中检查请求，所以我在此处包含了一个git存储库，其中包含示例代码：https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159

我必须包含依赖项而不是多字母资源，因为在使用iron-ajax时，polygit会抛出错误。

如何重现错误？

git clone https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159.git
打开DevTools并按下请求按钮。您将看到没有设置标头。在headers='{{computeHeadersProperty(csrfToken)}}'元素中更改第50行上的headers属性

headers='{"X-CSRF-Token":"ARandomString"}'

到

headings

再次点击“请求”按钮并检查开发工具，看看是否已在标头请求中准确设置了令牌。

我认为错误归结为

根据控制台的输出判断，错误似乎是iron-ajax元素中的Object属性需要string，但数据绑定的评估返回{ {1}}。

我希望有人至少可以重现错误。

Answer 1

headersProperty希望成为Object，而不是String。

工作示例：http://jsbin.com/rasoqexese/edit?html,output

非常感谢Peter Burns

Answer 2

关于这一主题的最后一次行动大约是半年前的事。我尝试了同样的事情：在iron-ajax请求的标题中添加一个标记。我尝试了原始海报尝试的所有内容，并尝试了答案中显示的所有内容。我在网上搜索了大约三个星期，有时每天晚上几个小时。我找不到解决方案。没有任何效果。属性不会评估和/或它们不会添加到请求的标头中。

我的回答：看起来不可能将计算属性添加到iron-ajax请求的标题。请记住， Polymer是一个非常新的框架，在下一个版本中需要改进很多东西。

Answer 3

您可能正在寻找attribute binding。这对你有用：

    <iron-ajax
         id="ajax"
         method="POST"
         url=""
         handle-as="json"
         headers$='{"X-CSRF-Token": "{{csrfToken}}"}'
         ></iron-ajax>

Answer 4

我认为您需要将notify:true放在csrfToken属性上。

Answer 5

这至少是一个有效的JSBIN版本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Bin</title>
    <base href="http://polygit.org/polymer+:master/components/">
    <!-- Third-party imports -->
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="iron-ajax/iron-ajax.html" rel="import">
    <!-- Styling -->
    <style>
    </style>
    <dom-module id="demo-element">
      <template>
          <button on-click="sendXMLHttpRequest">sendXMLHttpRequest</button>
          <iron-ajax
               id="ajax"
               method="POST"
               url=""
               handle-as="json"
               headers="{{computeHeadersProperty(csrfToken)}}"
               >
          </iron-ajax>
      </template>
    </dom-module>
    <script>
        Polymer({
            is: 'demo-element',

            properties: {
                csrfToken: {
                    type: String,
                    value: 'aBcDeF'
                },
                headersProperty: {
                    type: String,
                    computed: 'computeHeadersProperty(csrfToken)'
                },
                headersToken: {
                    type: String,
                    computed: 'computeHeadersToken(csrfToken)'
                }
            },

            sendXMLHttpRequest: function () {
                // ajax call
                console.log("Headers in AJAX: " + this.$.ajax.headers);
                //this.$.ajax.body = this.headersProperty;
                //this.$.ajax.generateRequest();
            },

            computeHeadersProperty: function (csrfToken) {
                return {"X-CSRF-Token": ' + csrfToken };
            }
        });
    </script>  
  </head>
  <body unresolved class="fullbleed layout vertical">
    <demo-element></demo-element>  
  </body>
</html>

PolymerJS：Iron-Ajax - 如何将令牌绑定到标题属性？

修改

如何重现错误？

我认为错误归结为

5 个答案: