4

I'm integrating MeteorJS collection with Packer for a Pinterest-like interface.

I'm having an issue that when a new item is added to the collection which is rendered by Packery (or Masonry, same issue), the new item just floats on top left of the container, and is not run through the Packery layout processor.

triggerMasonryLayout = function () {
  var $container = $('#masonry-layout');
  console.log("AUTORUN PACKERY", $container);

  $container.packery({
    itemSelector: '.item',
    gutter: 20,
    columnWidth: 300
  });

  $container.packery();
}

Template.bookingsProfileItem.onRendered( function() {
  triggerMasonryLayout();
});

<template name="bookingsProfileItem">

  <div class="item">
    ...

<div id="masonry-layout">
  {{#each properties}}
    {{> bookingsProfileItem}}
  {{/each}}
</div>
Victor S
  • 4,810
  • 5
  • 40
  • 62
  • what happened if you put it inside an [tracker.afterFlush](http://docs.meteor.com/#/full/tracker_afterflush)? `Tracker.afterFlush(function(){ triggerMasonryLayout();})` – Ethaan Apr 14 '15 at 01:07
  • Same issue. I switched to another tool which seems to do the trick https://atmospherejs.com/robodo/masonrify – Victor S Apr 14 '15 at 21:22

1 Answers1

2

I just figured out the solution to this problem and the key is _uihooks! This will invoke the functions you want after the change in the collection and before Blaze reactively update the DOM.

Not sure why you mixed Masonry and Packery into one. My solution here is strictly Packery.

bookingsProfileItem.js

var triggerPackeryLayout = function () {
  var $container = $('#packery-layout');

  $container.packery({
    itemSelector: '.item',
    gutter: 20,
    columnWidth: 300
  });
}

Template.bookingsProfileItem.onRendered(function() {
  this.find('#packery-layout')._uihooks = {
     //when new items are added to collection
     insertElement: function(node, next) {
        triggerPackeryLayout();
        $('#packery-layout').append(node);
        $('#packery-layout').packery('appended', node);
     }
  }
});

bookingsProfileItem.html

<template name="bookingsProfileItem">
    <div class="item">
      {{...}}
    </div>
</template>

<div id="packery-layout">
  {{#each properties}}
    {{> bookingsProfileItem}}
  {{/each}}
</div>

Got my references from RainHaven's Meteor UI Hooks Demo: https://github.com/RainHaven/meteor-ui-hooks-demo/blob/master/simple-todos.js

Meteor's v1.0.4, 2015-Mar-17 documentation on uihooks: https://github.com/meteor/meteor/blob/master/History.md#blaze-2

Teck
  • 21
  • 6
  • Another post about clarifying Meteor's uihooks: http://stackoverflow.com/questions/28260092/confusion-about-meteor-uihooks-and-what-triggers-them Meteor JS Animation tutorial using uihooks: http://www.webtempest.com/meteorjs-animation Packery docs: http://packery.metafizzy.co/methods.html – Teck Aug 27 '15 at 07:32
  • Interesting solution to a problem similar to mine... but how can the `this.find('#packery-layout')._uihooks` part work? `this` refers to the template object so `this.find` looks for `#packery-layout`, which is not one of its children nodes... – SolarBear Sep 05 '15 at 01:25