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

Question

我正在使用聚合物入门套件.我必须在不同的HTML页面中进行许多API调用,并且对于每个API调用,我使用"iron-ajax",因为'url'属性我正在分配REST API URL.

URL将类似于" https://XXXXX.in/YY/YY/YY ",此处基本URL XXXXX对于所有API调用都是相同的,YY将更改.那么如何将基本URL XXX存储在一个配置文件中并访问所有"铁阿贾克斯"的所有页面的价值？在哪里我应该访问基本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 行为中,并将其包含在元素中.

方案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将在您的所有元素中可用.