Polymer：如何在配置文件中存储 REST API 基本 URL

Question

我正在使用聚合物入门套件。我必须在不同的 HTML 页面中进行许多 API 调用，并且对于每个 API 调用，我使用“iron-ajax”作为“url”属性，我正在分配 REST API网址。

URL 将类似于“https://XXXXX.in/YY/YY/YY”，这里所有 API 调用的基本 URL XXXXX 都是相同的，并且 YY 会改变。那么我怎样才能将基本 URL XXX 存储在一个配置文件中并在所有页面中访问该值“铁阿贾克斯”？我应该在哪里访问 Base URL，它是否在所有页面的聚合物“就绪”功能中？

Answer 1

选项 1

在 Polymer 中，您可以将值存储为属性。如果您将基本 URL 作为节点树顶部的属性（在第一个父元素中），则可以将其传递给任何子元素（然后它们可以进一步向下传递）。

你的顶级元素：

<link rel="import" href="./child-el.html">
<dom-module id="main-el">
    <template>
        <child-el base-url="[[baseUrl]]"></child-el>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'main-el',
        properties: {
            baseUrl: {
                type: String,
                value: 'https://XXXXX.in'
            }
        }
    });
</script>

孩子：

<dom-module id="child-el">
    <template>
        <iron-ajax url="[[baseUrl]]/YY/YY/YY"></iron-ajax>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'child-el',
        properties: {
            baseUrl: {
                type: String
            }
        }
     });
 </script>

选项 2

您可以将所有 ajax 调用放在一个不会在屏幕上呈现任何内容的元素中，并将该元素包含在您需要的任何位置。

<link rel="import" href="./api-handler.html">
<dom-module id="main-el">
    <template>
        <api-handler id="api-handler"></api-handler>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'main-el',
        attached () {
            this.$['api-handler'].makeRequest();
        }
    });
</script> 

选项 3

将 baseUrl 属性存储在 Polymer behavior 中，并将其包含在您的元素中。

选项 4

您可以将值附加到全局可访问的窗口对象。你的 config.html 看起来像：

<script>
    (function (Config) {
        Config.BASE_URL = 'https://XXXXX.in';
    })(window.Config = window.Config || {});
</script>

然后将其导入 index.html：

<link rel="import" href="./config.html">

..和 Config.BASE_URL 将在您的所有元素中可用。