聚合物core-localstorage - 加載預先存在的全局js變量

在下面的精簡代碼示例中，core-localstorage元素不應該將全局js變量`itemsApiURL'的值加載到{{value}}中，以便在自定義元素準備好時將其傳遞到my-datasource-element中？或者，core-localstorage的目的僅限於將值寫入localstorage？目前，儘管my-datasource-element的ready（）事件存在全局變量（理想情況下設置爲外部js配置文件，不包含在頭部，如下所示），但{{value}}未定義。我絕對沒有做正確的事情......也許我對js缺乏安慰，或者某種事件發生的範圍/順序問題。聚合物core-localstorage - 加載預先存在的全局js變量

也許有一個完全更好的方法來配置聚合物應用程序範圍的變量/常量，以便值可以很容易地用於我的所有應用程序元素，或者至少通過雙向數據綁定作爲元素屬性傳遞？這真的是我認爲的更重要的問題......但無論如何，我仍然對核心本地存儲如何運作感到困惑。

<html> 
    <head> 
     <script> 
      this.itemsApiURL = "http://server:port/api/items"; 
     </script> 

     <link rel="import" href="./components/platform/platform.js"> 
     <link rel="import" href="./components/core-localstorage/core-localstorage.html"> 
    </head> 

    <body fullbleed unresolved> 

     <template is="auto-binding"> 
      <core-localstorage name="itemsApiURL" value="{{value}}"></core-localstorage> 

      <my-datasource-element url="{{value}}" items="{{items}}"><my-datasource-element> 
     </template> 

    </body> 
</html>

來源

2014-09-12 sinjins

聚合物儘可能地讓你不必擔心時間問題（也就是聽事件的定時信號）。特別是，因爲元素升級會保留屬性值，事件和其他元素功能，所以當您需要將值戳入元素中時，通常可以立即執行此操作。

例如，在這種情況下，您可以簡化爲：

<template is="auto-binding"> 
    <core-localstorage name="itemsApiURL" 
        value="{{itemsApiURL}}"></core-localstorage> 
    <label for="inputElement">itemsApiURL:</label> 
    <input type="text" 
     id="inputElement" 
     value="{{itemsApiURL}}" 
     size="50"> 
</template> 

<script> 
    document.querySelector('template').itemsApiURL = 
    'http://server:port/api/items'; 
</script>

它看起來是我們賽車的<script>標籤和<core-localstorage>與問候的itemsApiURL價值，但高分子創建異步之間創建<core-localstorage>和查詢實際存儲。這意味着腳本標籤將始終首先運行，這正是我們正在尋找的。

這是一個活生生的例子：http://jsbin.com/zuvet/2/edit

記住測試時，你可能需要使用的開發工具來刪除localStorage的入門測試違約行爲。

P.S.自動綁定模板可能應該有明確的方式來設置屬性的默認值，可能是通過屬性。

P.P.S.看着這個例子，我發現core-localstorage有一個錯誤。它不應該將未初始化的值存儲到存儲中，但它僅檢查null而不檢查undefined（https://github.com/Polymer/core-localstorage/issues/5）。

來源

2014-09-13 17:38:31

同意。更直接的實現。感謝您的補充說明。 – sinjins 2014-09-15 17:54:56

你在這裏。

一個問題是，當使用JavaScript與<template is="auto-binding">中的變量進行交互時，您可以通過<template>元素上的屬性進行操作。如果您要讀取元素內設置的值，則需要等待事件被觸發。

其次，你應該設置你的默認值有點不同。我還不希望將變量名稱value用於已發佈的value=屬性，尤其是如果您有多個<core-localstorage>元素（它們不能將它們的value屬性發布到名爲value的變量）。

下面是一個工作示例，它捕獲您正在嘗試執行的操作。（Live version on JSBin。）每當您更改<input type="text">中的值時，更新的值將被寫入本地存儲，並且在您第一次訪問該頁面時，將使用默認值"http://server:port/api/items"。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Polymer Demo</title> 
    </head> 
    <body> 
    <script src="http://www.polymer-project.org/platform.js"></script> 
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
    <link rel="import" href="http://www.polymer-project.org/components/core-localstorage/core-localstorage.html"> 

    <template is="auto-binding"> 
     <core-localstorage name="itemsApiURL" 
         value="{{itemsApiURL}}"> 
     </core-localstorage> 
     <label for="inputElement">itemsApiURL:</label> 
     <input type="text" 
      id="inputElement" 
      value="{{itemsApiURL}}" 
      size="50"> 
    </template> 

    <script> 
     var template = document.querySelector('template'); 
     template.addEventListener('template-bound', function() { 
     template.itemsApiURL = template.itemsApiURL || 'http://server:port/api/items'; 

     // You can do something with template.itemsApiURL 
     // like use it to make an API call, etc. 
     }); 
    </script> 
    </body> 
</html>

來源

2014-09-12 21:19:20

非常出色的傑夫。在我注意到你的迴應之前，我實施了一些對我有用的東西（見下文）。如果您對哪種解決方案可能是更好/更高效/安全的解決方案有所瞭解，請隨時發表評論。我很想聽聽你的想法。 – sinjins 2014-09-12 23:05:19

之前我看到傑夫的出色和全面的迴應，我做它得到的東西的工作（沿着相同的路線作爲傑夫的解決辦法，但作用於不同的事件）的情況如下：

首先，我調整了一些現有元素的屬性/命名如下：

<core-localstorage id="datasourceURL" name="itemsURL" value="{{itemsURL}}"></core-localstorage> 

<my-datasource-element url="{{itemsURL}}" items="{{items}}"></my-datasource-element>

然後，我添加onload="loadItemsURL()"到body標籤。

接下來，當然需要腳本loadItemsURL函數並定義一個事件偵聽器。在這種情況下，我決定聽core-localstorage-load（核心元素本身實現這個事件）：

function loadItemsURL() { 
     window.addEventListener('core-localstorage-load', function(event) { 
      // Load base api URL for items collection from pre-existing global js variable (happens to be stored in external items.js) 
      // This forces core-localstorage element to refresh its value (and populate polymer {{itemsURL}}) 
      // in turn triggering datasource element to run ajax call 
      // (as it happens to be set to 'auto' get when it's URL attribute or params change) 
      this.datasourceURL.value = this.itemsURL; 
     }); 
    }

這爲我做的伎倆，正如傑夫的上述優異的解決方案。然而，也許傑夫可以闡明爲什麼一種方法/事件可能更有效率，或比另一種更受歡迎。

來源

2014-09-12 23:02:40 sinjins

它更符合'

聚合物core-localstorage - 加載預先存在的全局js變量

回答

相關問題