javascript - 评分系统JavaScript不会将结果发送到Firebase

Question

我有一个应该能正常运行的脚本，它正在根据其值（即1 / 5、2 / 5、3 / 5等）推送评级。但是该脚本根本无法与Firebase通信。我的JavaScript是否有问题，这会阻止输入值按指示发送到Firebase？这是所有必需的代码。另外，在文档的开头有指向firebase.js的链接。

(function() {
    var firebaseUrl = "https://myFirebase.firebaseIO.com/rating";
    var itemId = (rootRef).child;
    var rootRef = new Firebase(firebaseUrl);  // Reference the Firebase location
    var itemRef = rootRef.child("items").child(itemId);     //Define itemRef as the variable for itemId in firebase
    var star = $('.rating');
    var numRatings;
        star.click(function() {     //Watch out for rating1 inside of the website and grab its value. i.e. 1, 2, 3, 4, or 5
            itemRef.child("ratings").child("numRatings").set(star.val());   //Set ratings inside of Firebase with values such as 1, 2, 3, 4, and 5, under items such as item1, item2, item3, etc... 
        });

    var cumulativeRating;
    var averageRating;
    itemRef.child("ratings").on("value", function(ratingsSnapshot) {
        var ratingsData = ratingsSnapshot.val();
        numRatings = ratingsData.numRatings;
        cumulativeRating = ratingsData.cumulativeRating;
        averageRating = cumulativeRating / numRatings;
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Rating system begin-->
    <div class="rating">
        <div class="starRating">
            <div>
                <div>
                    <div>
                        <div>
                        <input id="rating1" class="rating" type="radio" name="rating" value="1">
                        <label for="rating1"><span>1</span></label>
                        </div>
                    <input id="rating2" class="rating" type="radio" name="rating" value="2">
                    <label for="rating2"><span>2</span></label>
                    </div>
                <input id="rating3" class="rating" type="radio" name="rating" value="3">
                <label for="rating3"><span>3</span></label>
                </div>
            <input id="rating4" class="rating" type="radio" name="rating" value="4">
            <label for="rating4"><span>4</span></label>
            </div>
        <input id="rating5" class="rating" type="radio" name="rating" value="5">
        <label for="rating5"><span>5</span></label>
        </div>
                <h3 class="ratingtext">Rated 4/5 by 103 users</h3>   
                <!--Rating system end-->

Answer 1

您的代码中有很多小错误。我将引导您完成其中的一些操作。但是，不只是复制代码，还请花一些时间来了解我实际上是如何解决这些问题的。您的首要目标应该是能够调试自己的代码，以摆脱这些更简单的错误。

好，我会写两个问题。可能还有更多，但这已经花费了足够的时间。


处理Firebase中尚无数据的情况
获取单击的单选按钮的值


处理Firebase中尚无数据的情况

当我将代码粘贴到jsbin中时发生的第一件事是，它将代码记录到devtools中的JavaScript控制台中（使用F12获取它们，并且在开发时应始终保持打开状态）：


  未捕获的TypeError：无法读取null的属性“ numRatings”


这是空指针异常的现代JavaScript版本，是由于对.numRatings或null进行undefined引起的。幸运的是，您在一个地方只有.numRatings：

itemRef.child("ratings").on("value", function(ratingsSnapshot) {
    var ratingsData = ratingsSnapshot.val();
    numRatings = ratingsData.numRatings;
    cumulativeRating = ratingsData.cumulativeRating;
    averageRating = cumulativeRating / numRatings;
});

因此， ratingsData似乎没有任何价值，这确实是在商品首次获得评级时发生的。在这种情况下，Firebase将使用 value（或 null）触发 undefined事件。

处理起来很容易：

itemRef.child("ratings").on("value", function(ratingsSnapshot) {
    var ratingsData = ratingsSnapshot.val();
    if (ratingsData) {
        numRatings = ratingsData.numRatings;
        cumulativeRating = ratingsData.cumulativeRating;
        averageRating = cumulativeRating / numRatings;
    }
});

在实际的实现中，您可能需要向该 else添加一个 if并显示尚无/不足的评级。

获取单击的单选按钮的值

您将经过点击的值传递给Firebase的代码片段是：

var star = $('.rating');
star.click(function() {
    itemRef.child("ratings").child("numRatings").set(star.val());
});

我做的第一件事是在其中添加一条日志记录语句，以查看是否单击了代码：

var star = $('.rating');
star.click(function() {
    console.log('click');
    itemRef.child("ratings").child("numRatings").set(star.val());
});

现在单击单选按钮时，它会记录 click。因此，看起来好像已正确连接。下一步，我通常会放一个 JavaScript debugger statement而不是 console.log，但是这次我决定不这样做。

我做的下一个技巧是设置一个简单的Firebase记录器，以显示所做的更改是否可以传递到Firebase：

 new Firebase('https://you.firebaseIO.com/rating').on('value', function(s) { console.log(JSON.stringify(s.val())); })

您可以将其添加到脚本顶层。我经常将其添加到Chrome的devtool的控制台中。每当您的Firebase的值更改时，它将记录以下内容：

{"items":{"42":{"ratings":{"numRatings":"3"}}}}

或这就是它应该做的，但是在您的原始脚本中，它从未执行过。因此，我们进入了点击处理程序，但该值并未传递给Firebase。

仔细检查发现有些奇怪：

var star = $('.rating');
star.click(function() {
    itemRef.child("ratings").child("numRatings").set(star.val());
});

您可以在此代码段的第一行中使用变量 star指向所有评分元素。但是，然后在点击处理程序中执行 star.val()，这意味着您希望它引用单个评级元素：被点击的评级元素。

在此处，您可以快速了解变量名称：对于包含所有评分元素的变量，使用单数 star可以设置此错误。我将该变量命名为 stars，以表明它包含多个星星。这样，当您键入 stars.val()时，您会更容易看到某种气味。

我不是jQuery专家，但是 docs for jQuery's click method的快速Google似乎表明您可以以 this的形式访问单击的元素。因此，代码段需要为：

var star = $('.rating');
star.click(function() {
    itemRef.child("ratings").child("numRatings").set($this).val());
});

这样，我的Firebase JSON记录器就开始喷出数据：

{"items":{"42":{"ratings":{"numRatings":"3"}}}}

现在，这些值可用于Firebase！

从问题中消除技术

请注意，此最后更改与Firebase无关。如果您尝试警告该值，那么也会发生：

var star = $('.rating');
star.click(function() {
    alert(star.val());
});

这是调试问题（或创建MCVE）时的关键点：尝试从问题中删除尽可能多的技术。通过从这个微小的代码片段中删除Firebase，问题就出在“为什么我的星级未将其纳入Firebase？”改为“为什么此代码片段不显示我单击的星星的值？”或一旦您迷住了“我如何获得所单击元素的值？”。最后一个问题是您可以输入Google并期望获得不错的结果的问题，因为您不是第一个对此感到困惑的人。试图在Firebase上建立星级评分系统的人数要少得多。

最后

正如我已经说过的那样，您的脚本仍然存在问题。例如：每次单击单选按钮都会由我的Firebase JSON记录器生成一对行：

{"items":{"42":{"ratings":{"numRatings":"3"}}}}
{"items":{"42":{"ratings":{"numRatings":""}}}}

因此，每次单击单选按钮时，似乎都会触发Firebase中的两个更改，而第二个更改将撤消第一个更改的工作。我很确定我能弄清楚为什么会这样。但是，我希望通过上面的课程，您将能够自己解决这个问题。

我的最终脚本：

(function() {
    var firebaseUrl = "https://your.firebaseio.com/rating";
    var itemId = 42; // TODO: look up Id of the actual item
    var rootRef = new Firebase(firebaseUrl);
    var itemRef = rootRef.child("items").child(itemId);
    var star = $('.rating');
    var numRatings;
    star.click(function() {
        itemRef.child("ratings").child("numRatings").set($(this).val());
    });

    var cumulativeRating;
    var averageRating;
    itemRef.child("ratings").on("value", function(ratingsSnapshot) {
        var ratingsData = ratingsSnapshot.val();
        if (ratingsData) {
            numRatings = ratingsData.numRatings;
            cumulativeRating = ratingsData.cumulativeRating;
            averageRating = cumulativeRating / numRatings;
        }
    });
})();

它也在jsbin上进行了调试： http://jsbin.com/lekifefuce/1/edit?js,output