Knockout js如何实现倒计时

我是Knockout js的新手。尝试使用敲除js 在html上实现倒计时定时器

为此，我在视图中添加了4个html元素（输入、跨度和开始、停止按钮）。当按下启动按钮时，写入<input>对象的值应该传递给refreshViewModel，并且会有倒计时过程。当倒计时正在处理时，剩余时间将显示在<span>元素内。如果按下停止按钮，倒计时将停止。

如果倒计时结束，将启动另一个函数（从另一个viewModel调用），该函数正在用一些参数过滤页面。

将文本框值绑定到范围值。我不知道如何动态地计算和显示跨度内的剩余值？

Html:

<div id="pnlTimer" class="row">
  <div class="span2 pull-right" style="border:1px solid rgb(218, 218, 218)" >
    <span style="font-weight:bold">Reload Interval</span>
    <br />
    <input  id="initialTime" style="width:20px;height:14px" data-bind="value:  initialTime" />
    <span id="remainingTime" style="visibility:hidden"> / 15</span> second(s)
    <button class="btn" style="margin-top:5px" id="StartCounter" data-bind="click: StartCounter">
       <i class="icon-play"></i>
    </button>
    <button style="visibility:hidden;margin-top:5px;margin-left:-44px" class="btn"  id="StopCounter" data-bind="click: StopCounter">
       <i class="icon-stop"></i>
    </button>
  </div>
</div>

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;

});

第一视图模型：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();
}

};

第二视图模型：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....