Question

I have a backbone fetch view method that does this:

var ResultsView = Backbone.View.extend({
  template : _.template($("#result_template").html()),
  render : function() {
    this.collection.each(function(result) {
      var $output = $(this.template(result.toJSON()));
      var $container = $('#result_content');
      $container.append($output)
      $container.masonry('appended', $output);
    }, this);
    return this;
  }
});

What I am trying to do is for every item in my results collection…. append it to my #result_content div, in the same fashion as can be seen here: http://masonry.desandro.com/demos/adding-items.html

The issue here is that the layout is not filled (it’s just a single column at the moment. I have to call reload at the end of all of this like so:

$container.masonry('reload')

Which is not what I want. I want to append from top down.

Answer 1

Change that line to $container.prepend($output).masonry('reload'); then remove the subsequent line $container.masonry('appended', $output); and also don’t call “reload” at the end.