如何使用Firebase自动使用新数据更新视图页

Question

我知道Firebase是实时提供数据，但是我无法使用新数据更新我的视图而无需刷新完整页面。如何在不需要刷新页面的情况下更新我的HTML页面。

下面是我的.js文件，我在其中查询firebase当时拔出对象，并在"体验"阵列中渲染我的"用户" html页面，我通过循环浏览并填充了我的html中的"体验"阵列。值。

我希望能够在数据添加到我的firebase db中时填充html中的新值，我以为" .on .on（...）'会这样做，但没有运气。

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>

Answer 1

在您的.then中设置为数据库后，您可以location.reload（），

这是骇客。

现代框架对燃料非常有用，因为它们会在状态变化上呈现。我喜欢反应和燃料。

另外，您可以使用Firebase事件听众，尽管我不确定如何使用Vanilla JavaScript实施。https://firebase.google.com/docs/database/web/read-and-and-write#listen_for_value_events