knockoutjs：リストで複数のカウントダウンタイマー（foreachの）

Question

私はStackOverflowの上ここでは、既存のカウントダウンタイマーの例を見つけました： solution by @Jeroen

を。これは、単一ko.observable（NUM）上の単一のタイマーを使用しています。

I）のリストがko.observableArray（ある ... foreachのコンテキスト（リスト）でこれを実装する必要があり、私は次の操作を行うことができますかわからない：

1）してくださいフライ

2）値（HH取る関数の作成上で観察プロパティmyObservableList.DeliveryTime：

：パラメータ、およびリターンとしてmm）は/ initが含まスニペットを参照してくださいカウントダウンタイマー

です

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>

Answer 1

私は、これはあなたがやろうとしているものだと思いますか？各タイマーモデルには独自の設定インターバル方式があります。私はちょうどタイマーのリスト/配列を作成しました。それから私は、データの各部分を反復処理し、ビューモデルでタイマー配列に戻って新しいTimerModelを返すために、マップ機能を使用しています。

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>