Polymer - JavaScript - 데이터 바인딩 : 실시간 업데이트?

Question

두 페이지가 있습니다 : my-view1 및 my-view2입니다. my-view1에는 LocalStorage에서 데이터를 추가 및 제거하는 두 개의 단추가 있습니다. my-view2에는 두 개의 간단한 div가 있는데 READ (표시) 총 값과 지난 6 개월의 총 값입니다.

그러나 두 번째 페이지에서는 페이지를 새로 고치지 않으면 값이 업데이트되지 않습니다. my-view2의 값이 페이지가로드 될 때마다 (캐시 된 경우에도) 자동으로 업데이트되기를 원합니다.

여기 my-view2가있는 plnkr입니다. 그래서 내가하려는 일을 방해 할 수 있습니다.

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

내가 어떻게 할 수 있습니까?

Answer 1

당신은 로컬 스토리지 업데이트 할 때 트리거 내-뷰 2에서 몇 가지 소품을 업데이트 storage 이벤트를 수신 할 수 있습니다 저장 이벤트가되지 않기 때문에 행동의 here 설명 : EDIT (working plunk)

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

을

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 동일한 값으로 조건부 중복 업데이트를 처리합니다. 당신이 당신의 페이지 (보기-2)를 업데이트하는 값이 변경되어 지금까지 동적으로 할 때 당신은 WebSocket을 사용할 수 있습니다