DOM 模型更新时不更新

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 模型更新时不更新

DOM not updating when model updates

javascript

rivets.js