jsRender and isotope

Question

I am trying to get jsRender and isotope working together, however I cannot get them working together after rendering. If I remove the template and use raw html, isotope works just fine:

At page load, I show some "holding posts" which just have some loading animation eg

<div class="grid">
   <div class="post holding-post">
       <h6>Author</h6> //
        <...>
   <div>
   <div class="post holding-post">
       <h6>Author</h6> //
        <...>
    <div>
    ...
</div>

I am then calling isotope:

var $grid = $('.grid').isotope({
    itemSelector: '.post',
    masonry: {
        columnWidth: '.col.l6', // using materialize css - this is 50% width and appears to work for the loading posts
        gutter: 0
    }

This works perfectly and lays out the holding posts as designed.

at some point later, I load the actual posts via ajax and in the done function, I have:

var posts_html = $("#posts-template").render(posts_array);
$(".grid").html(posts_html);

$grid.isotope('reloadItems');
$grid.isotope('layout');

and the template is simply the same as the holding posts:

<script id="posts-template" type="text/x-jsrender">
     <div class="post holding-post">
       <h6>{{:author}}</h6> 
      <...>
   <div>
</script>

however, following the render, the outer grid is rendered with zero height and The posts are all on top of each other; ie the post elements are not made absolute positioned; ie; they are not "isotoped" !!

I have tried calling the full isotope function again after render with no success.

in that case, the outer grid is not affected at all and it just lays out normally as if isotope has not been called at all and also added a timeout to see if that was the issue, but no success.

Can anyone see what I have done wrong