DOM을 자동으로 업데이트하는 방법 - Firebase 문제

Question

숙제는 Firebase를 사용하고 moment.js를 사용하여 열차가 도착할 시간과 다음 열차 도착까지 남은 시간을 업데이트합니다. 기차 도착 및 시간 자동 업데이트를 제외한 거의 모든 것이 작동합니다. 나는 이것이 Firebase를 사용함으로써 자동적으로 일어날 것이라는 생각을 가지고 있었지만, 뭔가를 놓치고있는 것이 명백하다. - 내가 페이지를 새로 고침하면 정확한 시간이 나타난다.

나는 그러므로이없는 중포 기지와 함께 작동하도록 jsfiddle 가져올 수 없습니다 - 나는 또한 전체 코드와 다른 부분 (나을 거의 모든 주위에 다양한 랩에 $(document).ready(function()을 시도했습니다

을 -하지 않습니다 여기서 열거). 많은 감사를

는 내가 그 .vals()에 firebase.set(), firebase.update(), 또는 firebase.push()과 뭔가를해야합니다 생각하지만, 내 숙제 마감일이 다양한 경로를 방황 누락 전에 올바른 방향으로 포인터 기대했다 ...

ps

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

나는 이것이 나의 처음에 대답하려고하고있는 말함으로써 시작하고 싶습니다 : 그것은 적절한 있다면 HTML을 게시 할 행복/CSS는

---

JS 코드가 여기에 확실하지 않았다 여기에 관한 질문. 나는 아직도 코딩에 익숙하지 않지만 잘하면 나는 도움이 될 수있다. 데이터베이스 쿼리를 displayTime 함수로 옮기고 document.on 준비 함수에 setInterval을 두었습니다. 테이블을 저장하는 div는 비워지고 1 초마다 업데이트됩니다. 시간을 지속적으로 업데이트하는 가장 좋은 방법인지 여부는 확실하지 않지만 도움이되기를 바랍니다.

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; 
    }); 

});