Firebase에서 자동으로 새로운 데이터로 뷰 페이지를 업데이트 하시겠습니까?

Question

Firebase이 실시간으로 데이터를 제공하지만 전체 페이지를 새로 고치지 않고 새 데이터로 내 뷰를 업데이트 할 수 없다는 것을 알고 있습니다. 페이지를 새로 고치지 않고도 html 페이지를 새 데이터로 업데이트하려면 어떻게합니까?

아래는 내 .js 파일입니다. Firebase가 시간에 개체를 꺼내고 '경험'배열이 전달 된 '사용자'html 페이지를 렌더링합니다.이 HTML 파일은 목록을 반복하여 HTML로 처리하고 값을 채우는 중.

데이터가 내 firebase db에 추가되면서 html에 새 값을 채울 수 있기를 원합니다. '.on (...)'이 행운을 부는 줄 알았습니다. 당신의 그 때는에서

Answer 1

app.get('/users', function(req,res) { 
 
    var experiences = []; 
 
    var ref = firebase.database().ref('my_reference_path'); 
 
    ref.on("value", function(snapshot) { 
 
    //promise array to hold all the promises that will be returned from our query 
 
    var promises = []; 
 
    //push each promise to the array to wait to resolve 
 
    snapshot.forEach((snap) => { 
 
     promises.push(firebase.database().ref('ref_path')); 
 
    }); 
 
    //once all promises have resolved 
 
    Promise.all(promises).then((snapshots) => { 
 
     //push the resolved objects to the experiences array 
 
     snapshots.forEach((usersnap) => { 
 
      experiences.push(usersnap); //push objects into the "experiences" list 
 
     }); 
 
     return experiences 
 
    }).then(experiences => res.render('users', 
 
     {list: experiences})) //render the view and pass the "experiences" list to the client 
 
    }); 
 
});

<div> 
 
    <% for(var i=0; i < list.length; i++) { %> 
 
    <!-- Populate divs with user information --> 
 
    <div> ... </div> 
 
    <div> ... </div> 
 
    <% } %> 
 
</div>

이 비록 해키

데이터베이스는 (location.reload 수)로 설정 한 후.

현대의 프레임 워크는 상태 변경을 렌더링하기 때문에 파이어베이스와 잘 어울립니다. 나는 반항과 방화설을 좋아한다.

또는 firebase 이벤트 리스너를 사용할 수 있지만 바닐라 자바 ​​스크립트로 구현하는 방법을 잘 모르겠습니다. https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events