knockoutjs：列表中的多个倒数计时器（foreach）答案

【问题标题】：knockoutjs : multiple countdown timers in list (foreach)knockoutjs：列表中的多个倒数计时器（foreach）
【发布时间】：2018-05-28 09:58:53
【问题描述】：

我在 stackoverflow 上找到了一个现有的倒数计时器示例： solution by @Jeroen

这是在单个 ko.observable(num) 上使用单个计时器。

我需要在 foreach 上下文（列表）中实现它... 该列表是一个 ko.observableArray()，我不确定如何执行以下操作：

1) 使属性 myObservableList.DeliveryTime 可即时观察

2) 创建一个函数，以值 (hh:mm) 作为参数，并返回/初始化倒数计时器

查看包含的 sn-p ：

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>

【问题讨论】：

当您尝试在 foreach 内链接的自定义 timer 绑定时会发生什么？

标签： javascript knockout.js timer

【解决方案1】：

我认为这就是你想要做的？每个计时器模型都有自己的设置间隔方法。我刚刚创建了一个计时器列表/数组。然后我使用 map 函数遍历每条数据，并将一个新的 TimerModel 返回给 ViewModel 中的 Timers 数组。

function ViewModel() {
    var self = this;
    var timers = [60,30,10,60]
    this.TimeAmount = ko.observable();
    this.Timers = ko.observableArray(timers.map(function(timer){
      return new TimerModel(timer);
    }));
    this.AddTimer = function() {
      if(self.TimeAmount()) {
        self.Timers.push(new TimerModel(self.TimeAmount()));
      }
      self.TimeAmount(null)
    }
};

var TimerModel = function(time) {
  var self = this;
  this.Timer = ko.observable(time);
  
  setInterval(function() {
        var newTimer = self.Timer() - 1;
        if(newTimer <= 0) {
          self.Timer(0) }
        else {
          self.Timer(newTimer <= 0 ? 60 : newTimer);
        }
    }, 1000);
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" data-bind="textInput: TimeAmount" />
<button data-bind="click: AddTimer">Add Timer</button>
<div id="timer" data-bind="foreach: Timers">
  <span data-bind="text: Timer"></span>
</div>

【讨论】：