如何使用Firebase中的新数据自动更新视图页面?

问题描述

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

I know Firebase provides data in realtime but I am not being able to update my view with new data without refreshing the full page. How do I update my html page with new data without having to refresh the page.

下面是我的.js文件，我在其中查询Firebase以提取对象，并使用传入的"experiences"数组呈现用户" html页面，我通过遍历列表并填充在html中进行处理值.

Below is my .js file where I query Firebase to pull out objects at the time and render my 'users' html page with the 'experiences' array passed in, which I handle in my html by looping through the list and populating values.

我希望能够在html中填充新值，因为数据已添加到我的Firebase数据库中，并且我认为'.on(...)'可以做到这一点，但是没有运气.

I want to be able to populate new values in the html as the data is added to my firebase db and I thought '.on(...)' would do that but no luck.

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>

推荐答案

在您的.then中，然后将其设置为数据库后，您可以location.reload()，

In your .then after setting to your database you could location.reload(),

虽然这很骇人.

现代框架非常适合使用Firebase，因为它们会根据状态更改重新呈现.我喜欢反应和火力.

Modern frameworks are great with firebase because they re render on state changes. I love react and firebase.

或者，您也可以使用firebase事件监听器，但是我不确定如何使用原始javascript来实现. https://firebase.google.com/docs/database/网络/读写#listen_for_value_events

Alternatively you can use firebase event listeners, although, I’m unsure how to implement with vanilla javascript. https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events

这篇关于如何使用Firebase中的新数据自动更新视图页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！