Knockout js如何实现倒数计时器

我是Knockout js的新手.想要使用knockout js在html上实现倒数计时器

为此,我在视图中添加了4个html元素(输入,跨度和开始,停止按钮).按下开始按钮时,应该将写入对象的值传递给refreshViewModel,并且将有倒计时过程.当倒计时处理剩余时间将在元素内部显示.如果按下停止按钮,将停止倒计时.

如果倒计时完成另一个函数(即从另一个viewModel回调),则将启动一个过滤页面的函数.

绑定文本框值以跨越值.我无法弄清楚如何计算和显示内部动态的剩余值？

HTML:

  

    Reload Interval
    

    
     / 15 second(s)
    
       
    
    
       
    
  

JS:

     @Url.Content("~/Content/App/viewModels/listCasesViewModel.js
     @Url.Content("~/Content/App/viewModels/RefreshPageTimerViewModel.js                       



$(document).ready(function () {
    var viewModel = new ListCasesViewModel();
    viewModel.init();

    var pnl = $("#pnlFilterPanel").get()[0];
    ko.applyBindings(viewModel, pnl);


    var viewModelTimer = new RefreshPageTimerViewModel();
    viewModelTimer.init();

    var pnlTimer = $("#pnlTimer").get()[0];
     ko.applyBindings(viewModelTimer, pnlTimer);

    viewModelTimer.callBackMethod = viewModel.filter;


});

第一个viewModel:RefreshPageTimerViewModel:

var RefreshPageTimerViewModel = function () {
var self = this;


self.StartCounter = ko.observable();
self.StopCounter = ko.observable();
self.initialTime = ko.observable();
self.remainingTime = ko.computed(function () {
    return self.initialTime();
}, self);

countDown: ko.observable()


this.init = function () {
    self.Count();

}

this.callBackMethod = function () {
    alert("not implemented!");
}

this.Count = function () {

    var initial = self.initialTime; // initialTime value;
    var remaining = self.remainingTime; 


    if (remainingTime <= 0) {
        this.ExecuteCallBackMethod();
    }
}

this.ExecuteCallBackMethod = function () {
    this.callBackMethod();
}



};

第二个viewModel:ListCasesViewModel:

   var ListCasesViewModel = function () {
    var self = this;

self.selectedStartDate = ko.observable(null);
self.selectedEndDate = ko.observable(new Date());
self.selectedSearchKey = ko.observable("");
self.selectedStatuses = ko.observableArray();
self.selectedHospitals = ko.observableArray();

// methods...
this.init = function () {
    self.selectedEndDate(new Date());
    self.filter();
}

this.filter = function () {

    // get filter control values
    var startDate = self.selectedStartDate(); // dtStart.value();
    var endDate = self.selectedEndDate(); //dtEnd.value();
    var searchText = self.selectedSearchKey();

    //And Some calculations....

Jamiec.. 5

主要问题是您的ViewModel代码,它使用observable您想要的功能(启动和停止计数器).此外,它似乎没有明确定义它正在尝试做什么.

另外,我假设您希望"开始"按钮显示计时器何时停止,并且"停止"按钮显示计时器何时启动 - 因此我也可以自由添加此功能.

这是重写的视图模型:

var RefreshPageTimerViewModel = function () {
    var self = this;

    self.timerId = 0;
    self.elapsedTime = ko.observable(0);
    self.initialTime = ko.observable(0);
    self.remainingTime = ko.computed(function(){
        return self.initialTime() - self.elapsedTime();
    });
    self.isRunning = ko.observable(false);

    self.StartCounter = function(){
        self.elapsedTime(0);
        self.isRunning(true);
        self.timerId = window.setInterval(function(){
            self.elapsedTime(self.elapsedTime()+1);
            if(self.remainingTime() == 0){
                clearInterval(self.timerId);
                self.isRunning(false);
                self.Callback();
            }
        },1000)
    }
    self.StopCounter = function(){
        clearInterval(self.timerId);
        self.isRunning(false);
    }
    self.Callback = function(){}
}

有几点需要注意:

有一个属性timerId,它不需要是可观察的,但允许我们停止用于递增的定时器elapsedTime

有一个可观察的属性,isRunning用于控制"开始"和"停止"按钮的可见性

有一个空函数Callback,可用于在倒计时到零时执行任何功能.

这是新的标记:

  

    Reload Interval
    

    
     second(s)
    
       start
    
    
       Stop 
    
  

请注意添加visible: !isRunning()到开始visible:isRunning()按钮和停止按钮.

最后,这是init代码:

$(function(){
     var viewModelTimer = new RefreshPageTimerViewModel();
    viewModelTimer.Callback = function(){
        alert("finished");
    };
    ko.applyBindings(viewModelTimer);
})

请注意创建一个简单警告的回调函数.你的代码可能就是这样,即viewModelTimer.callBackMethod = viewModel.filter;

最后,一个让你玩的实例:http://jsfiddle.net/eF5Ec/