데이터를 그룹으로 묶기

Question

나는 녹아웃을 배우면서 다음과 같은 것을 시도하고있다. 데이터가 표시되지만 원하는 것은 데이터를 청크로 묶는 것입니다. 예를 들어 처음 3 개가 바인딩되고 다음 3 개, 다음 3 개가됩니다.

다른 말로하면 : 관측 가능한 배열에서 "청크"로 "사람"을 어떻게 푸시 할 수 있습니까?

다음은 몇 가지 샘플 코드입니다. 내 실제적인 경우에는 이미지을 바인딩하고 있으며,로드하는 데 시간이 걸리므로 데이터를 청크로 바인딩하려는 것입니다. 관찰 배열에 사람을 밀어

<div data-bind="foreach: people"> 
    <div data-bind="text:firstName"></div 
</div> 

내가 뭔가를 시도 :

여기

dispatcher(viewEvent, function(event, data){  
    $.each(data, function(){ 
    viewModel.people.push(this); 
    }); 
}); 


ko.applyBindings(new viewModel); 

내 HTML입니다 :

여기

var viewModel = { 
    topicsList : ko.observableArray() 
}; 

은 데이터 바인딩입니다 : 여기

내 뷰 모델입니다 이렇게 :

dispatcher(viewEvent, function(event, data) { 
    var loop = 0; 

    $.each(data, function(){ 
    ++loop; 
    viewModel.topicsList.push(this); 
    if(loop%3==0) {      
     ko.applyBindings(viewModel); 
    }); 
}); 

Answer 1

computed : 기본 이미지로 자리 표시 자 이미지 또는 이미지를로드 할 시간이되면 실제 이미지 URL이되도록 src이되도록보기 모델을 약간 다시 작성할 수 있습니다. 이처럼이보기와 같은

function personViewModel(url) { 
    var self = this; 

    self.firstName = ko.observable("Johndoe"); 
    self.imageUrl = ko.observable(url); 
    self.mayLoad = ko.observable(false); 

    self.imageSrc = ko.computed(function() { 
     return self.mayLoad() ? self.imageUrl() : "http://soulclimbing.mobi/Content/Media/image-loading-animation.gif"; 
    }); 
} 

뭔가가 사용할 수있는 세 가지의 덩어리에서 이미지로드에 대한

<div data-bind="foreach: people"> 
    <div> 
     <span data-bind="text:firstName"></span> 
     <br /> 
     <img data-bind="attr: {src: imageSrc}" /> 
    </div> 
</div> 

는 다양한 옵션이 있습니다. hackish하고 순진한 솔루션으로 setInterval을 사용하여 매 x 초마다 새로운 청크를 시작합니다. 이 같은 것 jsfiddle.

event binding을 사용하면 다음 이미지가로드 될 때 다운로드를 시작하는 것이 더 좋을 것입니다. 그러나 이미지로드 여부를 확인하는 것은 매우 어렵습니다 (캐싱 및 기타 등등). 따라서 라이브러리를 사용하여 작업을 처리 할 수 ​​있습니다. 예를 들어 this answer을 참조하십시오.