1

クリックで 0 になった後に再起動できるプロジェクトのノックアウト タイマーが必要です。次のコードがありますが、これは再起動しません。誰か助けてくれませんか。

this.countDown = ko.observable();

ko.bindingHandlers.timer = {

    update: function (element, valueAccessor) {
        var sec = $(element).text();
        var timer = setInterval(function () {

            $(element).text(--sec);
            if (sec == 0) {
                clearInterval(timer);

            }
        }, 1000);
    }
};
4

1 に答える 1

3

質問のアプローチを使用する場合は、次の行を置き換えます。

clearInterval(timer)

このようなもので：

sec = 61;

仕事でこれを見てください：

ko.bindingHandlers.timer = {

    update: function (element, valueAccessor) {
        var sec = $(element).text();
        var timer = setInterval(function () {

            $(element).text(--sec);
            if (sec == 0) {
                sec = 61;
            }
        }, 1000);
    }
};

var vm = { countDown: ko.observable() };

ko.applyBindings(vm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="timer"> <span data-bind="timer: countDown">60 </span> </div>

ただし、カスタム バインディングではなく、ViewModel にこの種のロジックをカプセル化することをお勧めします。たとえば、この種のビュー モデルは機能します。

function ViewModel() {
    var self = this;
        
    self.timer = ko.observable(60);
     
    setInterval(function() {
        var newTimer = self.timer() - 1;
        self.timer(newTimer <= 0 ? 60 : newTimer);
    }, 1000);
};

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="timer"> <span data-bind="text: timer"></span> </div>

于 2013-08-26T22:40:02.550 に答える