MeteorJS and Packery layout not updating when collection is updated

Question

I am integrating the MeteorJS collection with Packer for the Pinterest interface.

I had a problem when a new item is added to the collection that appears in the Packery package (or Freemasonry, the same problem), the new item just floats in the upper left corner of the container and does not start through the Package Composition Processor.

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

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

  $container.packery();
}

Run codeHide result

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

Run codeHide result

<template name="bookingsProfileItem">

  <div class="item">
    ...

Run codeHide result

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

Run codeHide result

Answer 1

I just decided to solve this problem and the key is _uihooks! This will call the functions you want after changing the collection, and before Blaze decisively updates the DOM.

Not sure why you mixed Freemasonry and packaging 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>

RainHaven Meteor UI Hooks Demo: https://github.com/RainHaven/meteor-ui-hooks-demo/blob/master/simple-todos.js

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