Question

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

下面是我的.js文件，我在那里查询Firebase以提取对象，然后使用传入的'experience'数组渲染我的'用户'html页面，我在html中通过循环遍历列表并填充值。

我希望能够在html中填充新值，因为数据被添加到我的firebase数据库中，我认为'.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的现代框架非常棒，因为它们会重新呈现状态更改。我喜欢反应和火力。

或者您可以使用firebase事件侦听器，但是，我不确定如何使用vanilla javascript实现。 https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events

如何使用Firebase自动更新包含新数据的视图？

1 个答案: