로드 할 CompositeView 및 대기 이미지

Question

화면 크기에 따라 열을 그리는 마리오네트 영역을 구현 했으므로 다양한 수의 열이 있습니다. 문제는 내가 가장 작은 높이로 열에있는 itemView를 찾고 싶다는 것입니다. 그러나 CompositeView appendHtml 메서드는 열의 높이를 정확하게 계산할 수 있기 전에 모든 itemViews를 추가하는 것처럼 보입니다. ItemView는 이미지가 있고 아직 렌더링되지 않으므로 정확하게 높이를 계산하지 않습니다. 나는이 방법은 모든 컬렉션 항목을 추가하고이 다른 곳에서이 논리를 수행하는 하나의 이유가 될 수 있다고 보았다

appendHtml: (collectionView, itemView, index) -> 
    $("#column-container").waitForImages -> 
     smallest_column = 0 
     columns= $("#column-container").children().length 
     column_sizes = [] 
     for i in [0...columns] 
     column_sizes[i] = $($("#column-container").children()[i]).height() 

     smallest_column = column_sizes.indexOf(Math.min.apply(Math,column_sizes)) 
     target = $($("#column-container").children()[smallest_column]) 
     target.append(itemView.el) 

:

나는 나의 aproximation를 붙여 넣습니다.

PD : 석조물을 사용하고 싶지 않습니다.

Answer 1

나는 여러 가지 방법을 다루려고 노력했다. 내가 실제로 발견 한 가장 실용적인 것은 단순히 발사하는 타이머를 설정하여 매초마다 제어해야하는 열의 높이를 설정하는 것이다.

그래서 예를 들어 여러 열이 있고 모두 높이가 같은 높이 (높이)가되기를 원한다면이 같은 것을 할 것입니다. 여기

는 내가보기에이 사용 작은 모듈입니다 :

define([ 
'jquery', 
'underscore' 
], 
function($, _){ 
var tools = { 
    makeColHeightSame: function(col_array, min_height) { 
    var max_col_height = 0; 
    _.each(col_array, function(col, index, cols){ 
     $(col).removeAttr('style'); 
     var height = $(col).height(); 
     if (height > max_col_height) { 
     max_col_height = height; 
     } 
    }, this); 

    _.each(col_array, function(col, index, cols){ 
     if (_.isUndefined(min_height)) { 
     $(col).height(max_col_height); 
     } else { 
     if (max_col_height < min_height) { 
      $(col).height(min_height); 
     } else { 
      $(col).height(max_col_height); 
     } 
     } 
    }, this); 
    } 
}; 

return tools; 

}); 

나는 내보기 나는 다음을 수행하십시오

 initialize: function(){ 
     // Set up resize timer 
     this.resize_timer = setInterval(_.bind(this.resizeCols, this), 500); 
    } 

보기가 파괴 될 때를 :

onBeforeDestroy: function() { 
    clearInterval(this.resize_timer); 
    }, 

내 크기 조정 대수 기능은 다음과 같습니다.

resizeCols: function() { 
    ViewTools.makeColHeightSame(this.$('.registration_box_bottom')); 
    ViewTools.makeColHeightSame(this.$('.opportunities_block')); 
    }, 

나는 underscore.js을 사용하여 타이머가 실행될 때이 컨텍스트가 내보기로 설정되고 require.js을 사용하여 ViewTools 모듈을 가져 오는 지 확인합니다.