javascript - polymer JS : Iron-Ajax - How to Bind Token to Headers Property?

Question

我有一个 polymer 元素，我想应用一个标记作为 header 属性。

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

有人告诉我，普通的复合绑定(bind)不起作用，我应该尝试计算绑定(bind)或只是计算属性。

但问题似乎是问题，如何将这些计算属性或计算绑定(bind)绑定(bind)到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 属性以及我想传入的 token 创建了计算绑定(bind)和属性。

但是当我使用大括号时，iron-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)'//不计算

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

---

编辑

---

一些用户已经提供了一个“可行的解决方案”，不幸的是它没有工作，因为 headers 似乎已设置，但它没有包含在 headers 请求中。证明:

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

此处 x-csrf-token 已正确设置。

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

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

---

如何重现错误？

1. git 克隆 https://github.com/LoveAndHappiness/polymer-iron-ajax-issue-159.git
2. 打开 DevTools 并点击请求按钮。您会看到没有设置标题。在 iron-ajax 元素中更改第 50 行的 headers 属性来自

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

到

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

1. 再次点击请求按钮并检查开发工具以查看 token 现在已准确设置在 header 请求中。

我认为错误归结为

从控制台的输出来看，错误似乎是 iron-ajax 元素中的 headings 属性需要一个 Object，但是来自数据绑定(bind)的评估返回一个 string。

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

Answer 1

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

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

非常感谢Peter Burns