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)'//不评估

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

---

编辑

---

有些用户已经提供了"工作解决方案",遗憾的是这种解决方案无法正常工作,因为headers似乎已经设置了,但它并未包括在内headers request.证明:

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

这里x-csrf-token设置得当.

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

我必须包含依赖项而不是多字母资源,因为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,以查看令牌现在是否已在标头请求中准确设置.

我认为错误归结为

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

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

Answer 1

该headersProperty想当Object,而不是一个String.

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

非常感谢Peter Burns