Question

在Meteor中使用Isotope插件时，Isotope始终将height: 0样式应用于Isotope div .grid-container。这可能是由于插件在图像加载之前初始化。手动在控制台中运行$('.grid-container').isotope()会导致Isotope使div可见。

问题：只有在加载了.item中的所有图片后，才能触发插件初始化？从imagesLoaded内调用同位素的Template.name.rendered方法似乎不起作用。

main.js

Template.main.rendered = function () {

     $('.grid-container').imagesLoaded(function() {
        $('.grid-container').isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            masonry: {
                columnWidth: 200
            }
        })
     })

};

main.html中

<template name="main">
    <div class="grid-container">

        {{#each items}}
            {{> item}}
        {{/each}}

    </div>
</template>

Answer 1

根据上述评论的要求......

以下是在进行最终追加和布局之前如何使用中间DOM元素进行同位素图像加载。

此示例适用于Backbone，但在Meteor中应该可以正常工作。两种情况下的关键方面是在空元素上初始化isotope()。例如：<div class="isotope"></div>

正如您在下面所见，我在grid_view中有Backbone处理所有这些内容，并在将项目添加到集合时一次呈现一个项目。当然，在流星中，这不是采取的方法。

为了记录，我不确定Meteor的例子是否可以开箱即用，但它并不遥远。我提到过，我还没有在Meteor中使用过同位素。 Backbone示例非常可靠，适用于我们。

以下是示例......

流星示例：

// In Meteor, you want your collection and the DOM element
Template.main.rendered = function() {

  // Pretty sure this.$ selector works in Meteor rendered
  this.$container = this.$('.isotope').isotope({
    itemSelector: '.gridItem',
    masonry: {
      columnWidth: '.gridSizer',
      gutter: '.gutterSizer'
    }
  });

  var items = CollectionName.find().fetch();

  var $holder = $('<div></div>')

  _.each(items, function(item) {
    // However you load external or partial templates in Meteor (not sure)
    $holder.append(partialTemplate(item));        
  }

  // Load images
  $holder.imagesLoaded(function() {
    // Append and layout on isotope        
    self.$container.append(item).isotope('appended', $holder);
  });
}

在Meteor中，您可以在发布功能中使用添加的回调，如果需要，可以一次一个地将模型发送到客户端。我还没有挖掘Meteor的分页，知道处理它的最佳方法。

骨干示例：

// Collection Add event
renderItem: function(model) {
  var self = this;

  // Run it through template
  var item = $(self._template(model.toJSON()));

  // Load images
  item.imagesLoaded(function() {
    // Append and layout on isotope        
    self.$container.append(item).isotope('appended', item);
  });
}

// Standard view render function
render: function() {
   this.$container = this.$el.isotope({
    itemSelector: '.gridItem',
    masonry: {
      columnWidth: '.gridSizer',
      gutter: '.gutterSizer'
    }
  });
}

在调用插件之前允许Meteor.js等待图像加载

1 个答案: