foreach 루프 녹아웃 제한

Question

아래의 ajax 호출에서 얻은 배열을이 knockout 매핑에 매핑했습니다.

function InvoiceViewModel(data) { 
var self = this; 

self.survey = data; 

} 

아약스 전화

$.ajax({ 
    url: 'http://localhost:43043/api/damage', 
    type: 'GET', 
    headers: { 'Accept': 'application/json' }, 
    data: { 
     orderNumber: num, 
     category: cat 
    }, 
    success: 
      function (data) { 
       var usingRoutData = document.URL; 
       ko.applyBindings(new InvoiceViewModel(data)); 
      }, 

    error: function() { 
     alert('failure'); 
    } 

}); 

내 배열

var test = { 
    Name: Blah, 
    Attributes: [ 
       {Name: Test, Type: Photo, Year:1988}, 
       {Name: Test, Type: Photo, Year:1988}, 
       {Name: Test, Type: Photo, Year:1988} 
       ] 
      }; 

내가 바인딩하고 어떻게 내 데이터

<div id="invoiceBodyWrapper"> 
<div data-bind="template: { name: 'invoice-template', foreach: surveys }"> 
</div> 

<div class="invoiceWrapper"> 
    </div> 
    <div id="completePictureWrapper" data-bind="template: { name: 'photo-template',  foreach: new Array(Attributes) }"></div> 

</div> 
</script> 

<script type="text/html" id="photo-template"> 
<!-- ko if: classification === 'photo' --> 
<div id="pictureWrappers"> 
    <img class="img" data-bind="attr: { src: 'http://myimagepath/download/full/' + $index()+1 }" /> 
</div> 
<!-- /ko --> 
</script> 
    <script src="~/Scripts/DamageInvoiceCreation.js"></script> 

내 속성 foreach 루프가 3 개의 속성 중 2 개만 표시하도록하는 방법이 필요합니다. 나는 이것을 수행하는 방법에 대해서만 몇 가지 발견하고 그들은 매우 지나치게 복잡하게 보입니다. 나는 녹아웃에서 이것을하는 간단한 방법이 없다고 상상할 수 없다.

Answer 1

당신은 이런 식으로 루프를 제한 할 수 있습니다

for(var i=0;i<data.length;i++){ 
    if(i>1){ 
     return false; 
    } 
} 

Answer 2

당신은 항상 3 개 속성을 가지고 있고 당신은 항상에만 그 중 2를 표시하려는 경우, 당신은 정확히 그들을 foreach는 할 필요가 없습니다.

그러나 특수 바인딩 컨텍스트 변수 $index()이 있습니다. 렌더링을 방해하지는 않지만 기본 숨김을 수행 할 수있게 해줍니다. $ index는 0부터 시작하므로 조건은 $index() < 2입니다. 안드레이가 주석에서 지적한 것처럼, $index is an observable, 메서드로 괄호로 호출해야합니다. 그렇지 않으면 비교가 예상 한대로 수행되지 않습니다 (int와 함수를 비교할 것입니다).

foreach 루프에서 일반 리미터를 원한다면 간단하지 않습니다. custom binding을 작성해야합니다.

또 다른 접근 방법은 뷰 모델에서 데이터를 사전 처리하는 것입니다. this.survey = data;을 설정하면 그 시점에 표시하지 않으려는 속성을 제거 할 수 있습니다.

편집 : 귀하의 편집에서 ko: if 가짜 요소에 대해 알고 있다고 생각합니다. 나는 그것들을 완전히 잊어 버렸지 만, 당신은 쉽게 어떤 인덱스를 넘어서 템플릿 항목을 렌더링하지 못하게 할 수 있습니다. foreach은 그 자체로 거대한 오버 헤드가 있어서는 안되는 관찰 가능 성을 여전히 평가할 것입니다.

Answer 3

자바 스크립트 배열은 잘 당신의 필요를 작성해야 우수한 slice 방법을 포함 :

template: { name: 'photo-template', foreach: Attributes.slice(0,2) } 

그러나 패트릭-M 언급 @, 당신은 루프를 필요로하지 않는 :

template: { name: 'photo-template', data: Attributes[0] } 
template: { name: 'photo-template', data: Attributes[1] } 

내 Repeat을 바인딩은 반복 횟수를 제한하기위한 옵션을 포함한다 :

<div data-bind="repeat: { foreach: Attributes, count: 2 }" 
     data-repeat-bind="template: { name: 'photo-template', data: $item() }"> 
</div> 

Answer 4

원본 배열 항목의 하위 집합을 내 viewmodel의 다른 배열로 푸시 한 다음 하위 집합 배열에 바인딩하여 유사한 문제를 해결했습니다.

Answer 5

당신은 제한된 배열 한계 계산 만들 수 있습니다

var limited = ko.computed(function() { 
    return Attributes.slice(0, limit); 
}); 

를 그런 다음 당신이해야 할 모든이 제한 foreach는 할 수 있습니다. 당신은 "더"요소 였을를 추가 할 수 있습니다

<!-- ko if: Attributes().length > limit --> 
    <div class="more">...</div>   
<!--/ko--> 

내가 그것을 더 세대에 도움이 될 것입니다 희망)