MeteorJS and Packery layout doesn't re-render

Question

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>

Answer 1

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