问题描述
我知道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中的新数据自动更新视图页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!