Question

我有一个Meteor应用程序，我将一个集合加载到Isotope网格中。这些项目可以使用Isotope的排序功能进行排序。

我的问题是第一次列出项目时过滤器不会触发。我已将所有Isotope函数放在Template.CatchesList.onRendered中，但不知何故，我必须从CatchesList页面导航到另一个页面，然后在过滤器工作之前再次返回。

我还将整个事物包裹在imagesLoaded中，以确保在Isotope渲染之前加载所有网格项图像，以避免任何奇怪的浮动。

Template.CatchesList.onRendered(function() {

$('.grid').imagesLoaded( function() {
// quick  search regex
var qsRegex;

// init Isotope
var $container = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  getSortData: {
    river: '.river',
    species: '.species',
    sex: '.sex',
    weight: '.weight parseFloat',
    date: '[data-date]',
  },
  sortBy: ['date'],
  sortAscending: {
    river: true,
    species: true,
    sex: true,
    weight: false,
    date: false
  },
  filter: function() {
    return qsRegex ? $(this).text().match(qsRegex) : true;
  }
});

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup(debounce(function() {
  qsRegex = new RegExp($quicksearch.val(), 'gi');
  $container.isotope({
    filter: function() {
      return qsRegex ? $(this).text().match(qsRegex) : true;
    }
  });
}));

// filter results on label click
$('#filter').on('click', 'label', function() {
  var filterValue = $(this).attr('data-filter');
  $('.quicksearch').val('')
  $container.isotope({
    filter: filterValue
  });
});

// sort results on label click
$('#sorts').on('click', 'label', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $('.quicksearch').val('')
  $container.isotope({
    sortBy: sortByValue
  });
});
});
});

有没有理由为什么过滤器在第一次渲染时不会触发？我可以做一些不同的事情来确保在过滤它们之前加载所有网格项吗？

我应该在Template.CatchesList.onCreated中使用其中的一些功能吗？或者我可以使用某种超时来延迟过滤器吗？

Meteor.onRendered中的同位素过滤器最初没有工作

0 个答案: