Question

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

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

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

1）使属性myObservableList.DeliveryTime可以动态观察

2）创建一个以值（hh：mm）为参数的函数，并返回/ init倒计时器

请参阅随附的摘录：

＆＃13;

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());

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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());

＆＃13;

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

＆＃13;

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

1 个答案: