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

我有一个聚合物元素,我想应用一个令牌作为头属性.

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

我被告知普通的复合绑定不起作用,我应该尝试计算绑定或只计算属性.

但问题似乎是问题,如何将这些计算属性或计算绑定绑定到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>

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

但是当我使用花括号时,铁-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)’//不评估

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

编辑

有些用户已经提供了“工作解决方案”,遗憾的是这种解决方案不起作用,因为标题似乎已设置,但它不包含在标头请求中.证明：

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

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

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

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

如何重现错误？

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

标题= ‘{{computeHeadersProperty(csrftoken)}}’

至

标题= ‘{ “X-CSRF令牌”： “arandomString”}’

>再次点击“请求”按钮,然后检查开发工具,看看是否已在标头请求中准确设置了令牌.

我认为错误归结为

根据控制台的输出判断,错误似乎是,iron-ajax元素中的标题属性需要一个Object,但是数据绑定的评估返回一个字符串.

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

解决方法

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

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

非常感谢Peter Burns