如何在准备好的文档中从Firebase获取数据

Question

I have devloped these firebase script, and I want some help to get like count from firebase data when document ready.

Second qousttion,How to make the button (like/dislike) can click once(want the user can only trigger it only once)?

Html

 // store the main Firebase URL var firebaseURL = 'https://app-api-163321.firebaseio.com/like-button/'; // update the likeCounts shown in a <span> beside each blogpost var postDivs = document.querySelectorAll('.post'); for (var i = 0; i < postDivs.length; i++) { var postID = postDivs[i].id; var numLikes = getLikeCount(postID); } // this function grabs the likeCount for a particular post from the Firebase function getLikeCount(postID) { var thisPostRef = new Firebase(firebaseURL + postID + '/like-count/'); thisPostRef.once('value', function (snapshot) { if (snapshot.val()) { document.querySelector('#' + postID + ' .like-count').innerHTML = snapshot.val() + ' likes'; } else { return 0; } }); } function likePost(id) { var postRef = new Firebase(firebaseURL + id); // get current number of likes here, so we can increment if any exist postRef.child('like-count').once('value', function (snapshot) { var currentLikes = snapshot.val() ? snapshot.val() : 0; postRef.update({ 'postID': id, 'like-count': currentLikes + 1 }, function (error) { console.log(error); }); getLikeCount(id); }); } function dlikePost(id) { console.log('running likePost() for post ID:', id); var postRef = new Firebase(firebaseURL + id); // get current number of likes here, so we can increment if any exist postRef.child('like-count').once('value', function (snapshot) { console.log('snapshot.val():', snapshot.val()); var currentLikes = snapshot.val() ? snapshot.val() : 0; console.log('currentLikes:', currentLikes); postRef.update({ 'postID': id, 'like-count': currentLikes - 1 }, function (error) { if (error) { console.log('Data could not be saved:' + error); } else { console.log('Data saved successfully'); } }); getLikeCount(id); }); } 

 <script src='https://cdn.firebase.com/js/client/2.2.7/firebase.js'></script> <div class="gpc" id="p72561979729402801623"> <a class="btn btn-success like bl1" data-id="13796" href="#" onclick="likePost('p72561979729402801623');">like</a> <div class="like-count bl2" /> <a class="btn btn-danger dislike bl3" href="#" onclick="dlikePost('p72561979729402801623');">dilike</a> </div> 

Are there anyways to do it?

https://jsfiddle.net/vj8regwy/

Answer 1

EDIT (added code for disabling the buttons client-side): You should get the idea and can finish it on your own

    <script>
    // store the main Firebase URL
    var firebaseURL = 'https://app-api-163321.firebaseio.com/like-button/';

    function updateLikeCount(postID, count) {
        document.querySelector('#' + postID + ' .like-count').innerHTML = count + ' likes';
    }

    document.addEventListener("DOMContentLoaded", function() {
        var postDivs = document.querySelectorAll('.post');

        for (var i = 0; i < postDivs.length; i++) {
            getLikeCount(postDivs[i].id, updateLikeCount);
        }
    });

    // this function grabs the likeCount for a particular post from the Firebase
    function getLikeCount(postID, callback) {
        var thisPostRef = new Firebase(firebaseURL + postID + '/like-count/');
        return thisPostRef.once('value', function (snapshot) {
            if (snapshot.val()) {
                callback(postID, snapshot.val());

            } else {
                callback(postID, 0);
            }
        });
    }

    function likePost(postID) {
        if (localStorage.getItem('liked') === "true") {
            return false;
        }

        var postRef = new Firebase(firebaseURL + postID);
        // get current number of likes here, so we can increment if any exist
        postRef.child('like-count').once('value', function (snapshot) {
            var currentLikes = snapshot.val() ? snapshot.val() : 0;
            postRef.update({
                'postID': postID,
                'like-count': currentLikes + 1

            }, function (error) {
                console.log(error);
            });
            localStorage.setItem('liked', true);
            document.getElementById('btn-like').disabled = true;
            getLikeCount(postID, updateLikeCount);
        });
    }

    function dlikePost(postID) {
        if (localStorage.getItem('disliked') === "true") {
            return false;
        }

        console.log('running likePost() for post ID:', postID);
        var postRef = new Firebase(firebaseURL + postID);

        // get current number of likes here, so we can increment if any exist
        postRef.child('like-count').once('value', function (snapshot) {
            console.log('snapshot.val():', snapshot.val());
            var currentLikes = snapshot.val() ? snapshot.val() : 0;
            console.log('currentLikes:', currentLikes);
            postRef.update({
                'postID': postID,
                'like-count': currentLikes - 1

            }, function (error) {
                if (error) {
                    console.log('Data could not be saved:' + error);
                } else {
                    console.log('Data saved successfully');
                }
            });
            localStorage.setItem('disliked', true);
            document.getElementById('btn-dislike').disabled = true;
            getLikeCount(postID, updateLikeCount);
        });
    }
</script>
<script src='https://cdn.firebase.com/js/client/2.2.7/firebase.js'></script>

<div class="gpc post" id="p72561979729402801623">
    <a class="btn btn-success  like bl1" data-id="13796" id="btn-like" href="#" onclick="likePost('p72561979729402801623');">Like</a>
    <span class="like-count bl2"></span>
    <a class="btn btn-danger  dislike bl3" id="btn-dislike" href="#" onclick="dlikePost('p72561979729402801623');">Dislike</a>
</div>