Question

我正在使用Rivets.js制作倒数计时器。倒数计时器最初出现，但每次调用setInterval时都不会递减。为什么呢？

使用Javascript：

function startTimer(minutes) {
    var countdown = (60 * minutes)-1;
    rivets.bind($('#timer'), { countdown: countdown });

    var timer = setInterval(function() {

        countdown--;

        if (countdown < 0) {
            clearInterval(timer);
        }
    }, 1000);
}

HTML：

<div id="timer">{countdown}</div>

Answer 1

您需要将铆钉与对象绑定，否则在更改变量时绑定会丢失：

function startTimer(minutes) {
    var countdownObj = {};
    var countdown = (60 * minutes)-1;
    countdownObj.cd = countdown;
    rivets.bind($('#timer'), { countdown: countdownObj });

    var timer = setInterval(function() {
        countdownObj.cd--;
        if (countdownObj.cd < 0) {
            clearInterval(timer);
        }
    }, 1000);
}

在你的HTML中：

<div id="timer">{countdown.cd}</div>

检查this plunker

模型更新时DOM不更新

1 个答案: