knockout foreach를 사용하여 다중 열 레이아웃을 만들려면 어떻게해야합니까?

Question

해결하려는 문제를 보여주는 코드 스 니펫을 포함 시켰습니다. observableArray 내의 데이터를 기반으로 2 열 레이아웃을 작성하려고합니다. 녹아웃 if 바인딩을 사용하여 시도했지만 foreach 내에서 제대로 작동하지 않습니다. 이것은 매우 간단해야만하는 것처럼 보이지만, 어떤 이유로 나는 Knockout 영역 내에서이 작업을 수행하는 방법을 알아낼 수 없었습니다.

function ViewModel() { 
 
    var self = this; 
 
    
 
    self.People = ko.observableArray([1, 2, 3, 4, 5]); 
 
} 
 

 
var viewModel = new ViewModel(); 
 

 
ko.applyBindings(viewModel);

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<h4>Current</h4> 
 

 
<div class="row"> 
 
    <div class="col-xs-12" data-bind="foreach: People"> 
 
     <p data-bind="text: $data"></p> 
 
    </div> 
 
</div> 
 

 
<h4>Desired</h4> 
 

 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 
      <div class="col-xs-6">1</div> 
 
      <div class="col-xs-6">2</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-6">3</div> 
 
      <div class="col-xs-6">4</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-6">5</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

그 시도 :

<div class="row"> 
    <div class="col-xs-12" data-bind="foreach: People"> 
     <!-- ko if: $index() % 2 == 0 --> 
     <div class="row"> 
      <div class="col-xs-6" data-bind="text: $parent.People()[$index()]"></div> 
      <div class="col-xs-6" data-bind="text: $parent.People()[$index()+1]"></div> 
     </div> 
     <!-- /ko --> 
    </div> 
</div> 

당신은 매트릭스로 데이터를 변환 할 필요가

JsFiddle