Polymer - JavaScript - 數據綁定：實時更新？

我有兩頁：my-view1和my-view2。在my-view1上，我有兩個按鈕用於添加和刪除LocalStorage中的數據。在my-view2上，我有兩個簡單的div，即READ（顯示）總價值，以及總計過去6個月的價值。Polymer - JavaScript - 數據綁定：實時更新？

但是，在第二頁上，如果頁面未刷新，則值不會更新。我希望my-view2中的值每次加載頁面時都會自動更新（即使被緩存，也可以查看）。

這是一個使用my-view2的plnkr，所以你可以undestrand我想要做的事情。

https://plnkr.co/edit/ul4T2mduxjElCN4rUUKd?p=info

我怎樣才能做到這一點？

來源

2017-10-20 unkn0wnx

播放動態當過值改變可以使用的WebSockets爲更新您的網頁（圖2），或者你有你可以使用eventstream任何後端那個目的。而對於當前的情況，只要使用setinterval檢查每一秒你localstorage如果有任何變化反映你頁面的變化。 –

非常感謝您的回覆！我目前正在將此頁作爲PWA構建。即使離線，Websockets也能工作嗎？另外，使用setInterval將讓應用程序睡眠？或者它會連續運行？ – unkn0wnx

setInterval將在脫機模式下工作，是的，你可以設置一個邏輯，以確定如果應用程序處於睡眠模式，你可以停止間隔檢查，當從睡眠模式喚醒時，你可以恢復。但是對於websocket，您需要主動連接互聯網，如果您正在使用myview-1和myview-2，則可以使用發佈消息來交流和更新my-view-2。 –

你可以聽storage事件觸發和更新我的-view2的一些道具，當你更新的localStorage：

<my-view-2 id="myView2"></my-view-2> 
<script> 
    window.onstorage = function(e) { 
    if (e.key !== 'someKeyYouWant') return; 
    document.getElementById('myView2').set('someProp', { 
     oldValue: e.oldValue, 
     newValue: e.newValue 
    }); 
    }; 
</script>

EDIT（working plunk）：因爲行爲的描述here存儲事件不會觸發窗口發起的變化，所以你必須觸發自己的存儲時，請考慮以下方法：

saveToLs(e) { 
    e.preventDefault(); 
    const newName = this.get('dogName'); 
    const ls = window.localStorage; 
    const synthEvent = new StorageEvent('storage'); 
    const eventConfig = [ 
    'storage', 
    true, 
    true, 
    'myDog', 
    ls.getItem('myDog'), 
    newName 
    ]; 

    synthEvent.initStorageEvent(...eventConfig); 

    setTimeout((() => { // ensure async queue 
    ls.setItem('myDog', newName); 
    this.dispatchEvent(synthEvent); 
    }).bind(this), 0); 
}

...並在聽音方面：

handleStorageUpdate(e) { 
    if (e.key !== 'myDog' || e.newValue === this.get('dogName')) return; 
    this.set('dogName', e.newValue); 
}

請注意if條件處理潛在的重複更新具有相同的值。

這裏是一個working plunk您與

來源

2017-10-22 00:32:35

你好！感謝您的回覆。我已經將代碼添加到'my-view2'頁面，但我仍然無法使其工作。我甚至嘗試將「值替換」替換爲console.log以查看它是否讀取LocalStorage，但它不會。我很確定我在代碼中做了一些壞事，但卻無法理解它在哪裏。我做了一個plnkr：https://plnkr.co/edit/HCIw7ExZ2rg7XEjQMLZi?p=catalogue – unkn0wnx

由於此處描述的行爲，此解決方案無法自行工作https://stackoverflow.com/a/4679754/2533680，I將通過一個工作示例更新我的答案。 –

所以我沒有辦法做到這一點？ – unkn0wnx

Polymer - JavaScript - 數據綁定：實時更新？

回答

相關問題