评级系统javascript不会将结果发送到firebase

Frank van Pu.. 5

你的代码中有很多小错误.我将带您了解其中的一些.但是,不要只是,请花点时间了解我实际上是如何解决这些问题的.您的第一个目标应该是能够调试自己的代码以摆脱这些更简单的错误.

好的,我会写两个问题.可能会有更多,但这已经需要足够的时间.

处理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语句而不是console.log下一步,但这一次决定反对.

我做的下一个技巧是设置一个简单的Firebase记录器,以显示更改是否通过Firebase:

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

您可以将其添加到脚本的顶级位置.我经常将它添加到Chrome的devtools控制台.每次Firebase的值发生变化时,都会记录下面的内容:

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

或者它应该做什么,但在原始脚本中它从未这样做.所以我们进入了点击处理程序,但是这个值没有进入Firebase.

仔细检查发现了一些奇怪的东西:

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

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

这里有一个关于变量名称的快速说明:通过star对包含所有评级元素的变量使用单数来设置自己的错误.我将该变量命名为stars,以表明它包含多个星星.那样你在打字时就会更容易看到有些东西闻起来stars.val().

我不是jQuery专家,但jQuery的click方法文档的快速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？" "为什么这段代码片段没有显示我点击的星星的价值？" 或者一旦你掌握了它"如何获得我点击的元素的价值？".最后一个是一个问题,你可以输入谷歌并期望得到一个体面的结果,因为你不是第一个与之斗争的人.试图在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

你的代码中有很多小错误.我将带您了解其中的一些.但是,不要只是,请花点时间了解我实际上是如何解决这些问题的.您的第一个目标应该是能够调试自己的代码以摆脱这些更简单的错误.

好的,我会写两个问题.可能会有更多,但这已经需要足够的时间.

处理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语句而不是console.log下一步,但这一次决定反对.

我做的下一个技巧是设置一个简单的Firebase记录器,以显示更改是否通过Firebase:

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

您可以将其添加到脚本的顶级位置.我经常将它添加到Chrome的devtools控制台.每次Firebase的值发生变化时,都会记录下面的内容:

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

或者它应该做什么,但在原始脚本中它从未这样做.所以我们进入了点击处理程序,但是这个值没有进入Firebase.

仔细检查发现了一些奇怪的东西:

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

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

这里有一个关于变量名称的快速说明:通过star对包含所有评级元素的变量使用单数来设置自己的错误.我将该变量命名为stars,以表明它包含多个星星.那样你在打字时就会更容易看到有些东西闻起来stars.val().

我不是jQuery专家,但jQuery的click方法文档的快速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？" "为什么这段代码片段没有显示我点击的星星的价值？" 或者一旦你掌握了它"如何获得我点击的元素的价值？".最后一个是一个问题,你可以输入谷歌并期望得到一个体面的结果,因为你不是第一个与之斗争的人.试图在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