knockoutjs :

Question

내가 유래 여기에 기존의 카운트 다운 타이머의 예를 발견 목록 (foreach는) 여러 카운트 다운 타이머 : 이 하나의 ko.observable (NUM)에 하나의 타이머를 사용 solution by @Jeroen

. 확인)

1 :

나는 foreach는 컨텍스트 (목록) ... 목록)는 ko.observableArray (인이 구현해야하고, 나는 다음을 수행하는 방법을 잘 모르겠어요 파리

2) 값 (HH받는 함수 만들기에 관찰 속성 myObservableList.DeliveryTime :

: 매개 변수, 반환로 mm)을/초기화가 포함 된 조각을 참조하십시오 카운트 다운 타이머

입니다

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