如何获取DOM自动更新-Firebase问题

Question

我的作业包括使用Firebase和使用moment.js更新火车将要到达的时间以及到下一列火车还剩多少分钟。 除了自动更新火车的到达时间和剩余时间，几乎所有的东西都在工作。 我有一个想法，即通过使用Firebase会自动发生这种情况，但是很明显，我缺少了一些东西-如果我刷新页面会刷新正确的时间显示。

我无法让jsfiddle与Firebase配合使用，因此缺少了-

我还尝试过$(document).ready(function() ，围绕整个代码和不同部分进行包装（几乎所有有意义的内容-在此都不会列举）。

我怀疑我需要做一个firebase.set() firebase.update()或firebase.push()和东西，那些.vals()但徘徊下来这些不同的路径和想念我的家庭作业的最后期限之前，我是希望能找到正确方向的指针，非常感谢...

ps乐于发布HTML / CSS不确定是否合适

---

js代码在这里：

var trainSchedule = new Firebase("https://kittson-trains.firebaseio.com/");
function displayTime() {
 //var time = moment().format('hh:mm:ss a');
 var timeNow = moment().format('h:mm:ss a');
 $('#currentTime').html("Current Time Is:  " + timeNow);
 //$('#currentTime').append(time);
 setTimeout(displayTime, 1000);
 };
 displayTime();

//trainSchedule.remove();
$("#trainSubmit").on("click", function(){

    var newTrainName = $("#newTrainNameInp").val().trim();
    var trainDest = $("#trainDestInp").val().trim();        
    var trainFirstTime = $("#trainFirstInp").val().trim();
    var trainFreq = $("#trainFreqInp").val().trim();
    var newTrainData = {
        trainName: newTrainName,
        dest: trainDest,
        freq: trainFreq,
        nxt: trainFirstTime,
    }

    trainSchedule.push(newTrainData);

    $("#newTrainNameInp").val("");
    $("#trainDestInp").val("");
    $("#trainFirstInp").val("");
    $("#trainFreqInp").val("");
    //stay on this page
    return false;   
});

trainSchedule.on("child_added", function(childSnapshot, prevChildKey){

    var newTrainName = childSnapshot.val().trainName;
    var trainDest = childSnapshot.val().dest;
    var trainFirstTime = childSnapshot.val().nxt; 
    var trainFreq = childSnapshot.val().freq;   

    var trainFirstConverted = moment(trainFirstTime,"hh:mm");
    console.log(trainFirstConverted);

    var diffTime = moment().diff(trainFirstConverted, "minutes");
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var tRemainder = diffTime % trainFreq;
    console.log(tRemainder);

    var minutesTilTrain = trainFreq - tRemainder;
    console.log("MINUTES TILL TRAIN: " + minutesTilTrain);

    var nextTrain = moment().add(minutesTilTrain, "minutes");
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("hh:mm"));

    $("#allTrains > tbody").append("<tr><td>" + newTrainName +
        "</td><td>" + trainDest +
        "</td><td>" + trainFreq +
        "</td><td>" + moment(nextTrain).format("hh:mm") +       
        "</td><td>" + minutesTilTrain + "</td></tr>"); 
});

Answer 1

首先，我想说这是我第一次尝试在这里回答问题。 我对编码还是很陌生，但希望可以为您提供帮助。 我将数据库查询移至displayTime函数，并将setInterval放置在document.on ready函数中。 存储表的div会被清空并每秒更新一次。 我不确定这是否是不断更新时间的最佳方法，但我希望它会有所帮助。

var trainSchedule = new Firebase("https://kittson-trains.firebaseio.com/");
var displayTime = function() {
  //var time = moment().format('hh:mm:ss a');
  var timeNow = moment().format('h:mm:ss a');
  $('#currentTime').html("Current Time Is:  " + timeNow);
  //$('#currentTime').append(time);
  trainSchedule.on("child_added", function(childSnapshot, prevChildKey){

    var newTrainName = childSnapshot.val().trainName;
    var trainDest = childSnapshot.val().dest;
    var trainFirstTime = childSnapshot.val().nxt; 
    var trainFreq = childSnapshot.val().freq;   

    var trainFirstConverted = moment(trainFirstTime,"hh:mm");
    console.log(trainFirstConverted);

    var diffTime = moment().diff(trainFirstConverted, "minutes");
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var tRemainder = diffTime % trainFreq;
    console.log(tRemainder);

    var minutesTilTrain = trainFreq - tRemainder;
    console.log("MINUTES TILL TRAIN: " + minutesTilTrain);

    var nextTrain = moment().add(minutesTilTrain, "minutes");
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("hh:mm"));

    $('#allTrains > tbody').empty();
    $("#allTrains > tbody").append("<tr><td>" + newTrainName +
        "</td><td>" + trainDest +
        "</td><td>" + trainFreq +
        "</td><td>" + moment(nextTrain).format("hh:mm") +       
        "</td><td>" + minutesTilTrain + "</td></tr>"); 
  });
};

$(document).on('ready', function(){

  setInterval(displayTime, 1000);

  //trainSchedule.remove();
  $("#trainSubmit").on("click", function(){

    var newTrainName = $("#newTrainNameInp").val().trim();
    var trainDest = $("#trainDestInp").val().trim();        
    var trainFirstTime = $("#trainFirstInp").val().trim();
    var trainFreq = $("#trainFreqInp").val().trim();
    var newTrainData = {
        trainName: newTrainName,
        dest: trainDest,
        freq: trainFreq,
        nxt: trainFirstTime,
    }

    trainSchedule.push(newTrainData);

    $("#newTrainNameInp").val("");
    $("#trainDestInp").val("");
    $("#trainFirstInp").val("");
    $("#trainFreqInp").val("");
    //stay on this page
    return false;   
  });

});