Knockout.js if 문

Question

I가 다음 코드 ... 나는 모든이의 높이에서 시작하는 것이, 3 개체 다양한 개체의 행을 만들기 위해 노력하고

<div data-bind="foreach:profiles"> 
    <!-- ko if: $index() % 3 === 3 --> 
      <div class="form-group"> 
    <!-- /ko --> 
      <div class="col-xs-3 col-md-1 no-padding-left"> 
        <img class="img-circle text-center" src="\Content\images\fake_profile_pics\md.png" alt=".." style="opacity: 1.9" /> 
        <h5 class="text-center"><span data-bind="text:Points"></span><span> points</span></h5> 
      </div> 
      <div class="col-xs-9 col-md-3"> 
        <a href="#" class="profile_popover people-h2" data-bind="text:DisplayName"></a> 
        <span class="display-block" data-bind="text:Division"></span> 
        <span class="display-block"><span data-bind="text:NominationsWritten"></span><span> Nominations Written</span></span> 
      </div> 
    <!-- ko if: $index() % 3 === 1 --> 
      </div> 
    <!-- /ko --> 
</div> 

그 위 행의 가장 낮은 요소. 이 코드의 문제점은 knockout이 첫 번째 div에 끝 태그를 찾을 수없고 오류없이 중단된다는 것입니다. 첫 번째 'ko if'문 내에 끝 태그를 넣으면 모든 것이 잘 작동합니다.

녹아웃 주석 달기 방법을 사용하여이 작업을 수행 할 수 있습니까, 아니면 녹아웃으로이 문제를 해결할 수있는 더 많은 방법이 있습니까?

Answer 1

당신은 당신의보기 모델을 표시하지 않지만, 이런 종류의 문제에 대해, 나는 그에게보기 모델과 바인딩에 computed 속성을 사용하는 대신 뷰 모델을 많이 혼합 훨씬 쉽게 생각 논리를 당신의 견해에 추가하십시오. 예를 들어,이있는 경우 :

function ViewModel() { 
    var self = this; 
    self.someStuff = ko.observableArray(); 
    //... other props 
} 

난 그냥 이런 식으로 계산 된 속성을 추가 할 것 :

function ViewModel() { 
    var self = this; 
    var numCols = 3; 
    self.someStuff = ko.observableArray(); 

    self.columns = ko.computed(function() { 
     var source = self.someStuff(); 
     if (source && source.length) { 
      var cols = []; 
      for (var i=0; i < source.length; i+=numCols) { 
       cols.push(source.slice(i,numCols)); 
      } 
      return cols; 
     } 
    }); 
    //... other props 
} 

참고 : 당신은 배열을 분할하는 더 나은 방법을 마련 할 수 있습니다.

그럼 당신은 그냥 좋아 바인딩 할 수 있습니다 :

<div data-bind="foreach:columns"> 
    <div class="form-group" data-bind="foreach:$data> 
     <div> 
      <!-- bind whatever properties you want here --> 
     </div> 
    </div> 
</div> 

그리고 당신은 밖으로보기의 추악한 논리 것을 유지. 그리고 관찰 된 배열이 바뀔 때마다 계산 된 속성은 재평가 될 것입니다.

Answer 2

인라인 if보다는 항상 class으로 줄 바꿈을 렌더링하지 않는 것이 좋습니다. div?

<div data-bind="css: { 'form-group': $index() % 3 === 3 }"> 
    ... 
</div>