Question

我已经实现了一个木偶区域，根据屏幕大小绘制列，所以我的列数可变。我的问题是我想在具有最小高度的列中找到itemView。但是，在我可以正确计算列的高度之前，CompositeView appendHtml方法似乎附加了所有itemViews。 ItemView有一个图像，但尚未渲染，因此我无法正确计算高度。

我粘贴了aproximation：

  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)

我看过这个方法附加了所有的集合项，这可能是在其他地方执行此逻辑的一个原因。

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);
  },

我的Resize Cols功能是：

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

我正在使用underscore.js来确保在计时器触发并使用require.js引入ViewTools模块时将此上下文设置为我的视图。

要加载的CompositeView和等待图像

1 个答案: