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

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元素中尝试的内容：

1. headers ='{“X-CSRF-Token”：“{{csrfToken}}”}'//不评估
2. headers ='{“X-CSRF-Token”：“{{headersToken}}”}'//不评估
3. headers =“{{headersProperty}}”//不评估
4. headers =“{{computeHeadersProperty（csrfToken）}}”//不评估
5. headers ='{“X-CSRF-Token”：“{{computeHeadersToken（csrfToken）}}”}'//不评估
6. headers ='{“X-CSRF-Token”：“headersToken”}'//评估{"X-CSRF-Token": "headersToken"}
7. headers ='computeHeadersProperty（csrfToken）'//不评估

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

---

编辑

---

有些用户已经提供了“工作解决方案”，遗憾的是这种解决方案不起作用，因为headers似乎已设置，但它不包含在headers request 。 证明：

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

这里正确设置了x-csrf-token 。

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

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

---

如何重现错误？

1. git clone https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159.git
2. 打开DevTools并点击请求按钮。 您将看到没有设置标头。 将iron-ajax元素更改为第50行的headers属性

headers='{{computeHeadersProperty(csrfToken)}}'

至

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

3. 再次点击“请求”按钮并检查Dev-Tools，以查看令牌现在是否已在标头请求中准确设置。

我认为错误归结为

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

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

Answer 1

headersProperty想要成为一个Object而不是一个String 。

工作示例： http ： //jsbin.com/rasoqexese/edit？html，output

非常感谢Peter Burns

Answer 2

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

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

Answer 3

您可能正在寻找属性绑定 。 这对你有用：

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

Answer 4

我认为你需要在你的csrfToken属性上放置notify:true 。

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>