聚合物：如何在配置文件中存储REST API基础URL

Question

我正在使用聚合物入门工具包。我必须在不同的HTML页面中进行很多API调用，并且对于每个API调用，我正在使用“iron-ajax”为'url'属性分配REST API URL。

URL将会像“https://XXXXX.in/YY/YY/YY”一样，这里所有API调用的基本URL XXXXX都是相同的，YY将会改变。所以我怎样才能将基本URL XXX存储在一个配置文件中，并在所有页面中访问所有“铁Ajax“的？我应该在哪里访问基本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> 

OPTION 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> 

OPTION 3

存放在聚合物behavior的的baseUrl财产，包括在你的元素。

方案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会在所有的元素可用。