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.... 

Answer 1

主要问题是你的ViewModel代码，它使用一个你想要一个函数的observable （启动和停止计数器）。 此外，它似乎没有明确定义它正在尝试做什么。

另外，我假设您希望“开始”按钮显示计时器何时停止，并且“停止”按钮显示计时器何时启动 – 因此我也可以自由添加此function。

这是重写的视图模型：

 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/