Javascript PolymerJS:Iron Ajax-如何将令牌绑定到Headers属性？

我有一个聚合元素，我想应用一个标记作为headers属性

当我按下按钮时，XMLHttpRequest被发送。负责的

ironajax

元素有一个带有字符串的

headers

属性。我想更改字符串，并应用不同的属性

有人告诉我，普通的

复合绑定

不起作用，我应该尝试

计算绑定

，或者只尝试

计算属性

但问题似乎是，如何将这些

计算属性

或

计算绑定

绑定到

ironajax

元素

每当我使用花括号时，都不会计算任何值。如果我不使用它们，则只解析剩余的字符串

以下是我的要点：

<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>

sendXMLHttpRequest
计算绑定头属性：
{{computeHeadersProperty（csrfToken）}
计算属性头属性：
{{headersProperty}}
计算绑定头令牌：
{{computeHeadersToken（csrfToken）}
计算属性HeadersToken：
{{headersToken}}
聚合物({
是：'演示元素'，
特性：{
csrfToken：{
类型：字符串，
值：“aBcDeF”
},
headersProperty：{
类型：字符串，
computed:'ComputeHeaderProperty（csrfToken）'
},
headersToken：{
类型：字符串，
计算：'computeHeadersToken（csrfToken）'
}
},
sendXMLHttpRequest:函数（）{
//ajax调用
this.$.ajax.body=this.headersProperty；
这是$.ajax.generateRequest（）；
},
computeHeadersProperty:函数（csrfToken）{
返回“{”X-CSRF-Token”：\“'+csrfToken+'\“}”；
},
computeHeadersToken:函数（csrfToken）{
返回csrfToken；
}
});

正如您所看到的，我已经为完整的

标题

属性创建了计算绑定和属性，并且只为我想要传递的令牌创建了计算绑定和属性

但是，当我使用花括号时，iron ajax元素不会评估任何东西

以下是迄今为止我在

ironajax

元素中尝试的内容：

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”}'//evalutes to

{“X-CSRF-Token”：“headersToken”}

headers='computeHeadersProperty（csrfToken）'//不计算

那么，如何将属性绑定到

ironajax

元素的

headers

属性

---

编辑

---

一些用户提供了“工作解决方案”，但不幸的是，该解决方案不起作用，因为

标题似乎已设置，但它未包含在
标题请求中。证明：


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


此处正确设置了
x-csrf-token

因为无法在提供的JSBIN中检查请求，所以我在这里包含了一个git存储库，示例代码如下：

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


如何重现错误？
git克隆
打开DevTools并点击请求按钮。您将看到没有设置任何标题。
将第50行的headers属性从
headers='{{computeHeadersProperty（csrfToken）}}'

到

headers='{“X-CSRF-Token”：“ARandomString”}'

再次点击Request按钮，并检入Dev Tools，以查看令牌现在是否已在请求头中正确设置
我认为这个错误归根结底是什么
根据控制台的输出判断，错误似乎是，
ironajax
元素中的
headers
属性需要一个
对象，但是来自数据绑定的求值返回一个
字符串

我希望至少有人能重现错误。
我认为您需要在
csrfToken
属性上添加
notify:true
。
这里至少有一个工作版本：


聚合物仓
sendXMLHttpRequest
聚合物({
是：'演示元素'，
特性：{
csrfToken：{
类型：字符串，
值：“aBcDeF”
},
headersProperty：{
类型：字符串，
computed:'ComputeHeaderProperty（csrfToken）'
},
headersToken：{
类型：字符串，
计算：'computeHeadersToken（csrfToken）'
}
},
sendXMLHttpRequest:函数（）{
//ajax调用
log（“AJAX中的标题：+this.$.AJAX.Headers”）；
//this.$.ajax.body=this.headersProperty；
//这是$.ajax.generateRequest（）；
},
computeHeadersProperty:函数（csrfToken）{
返回{“X-CSRF-Token”：“+csrfToken}；
<!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>

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