Using Ember's Handlebars #each helper within a block helper that slices an array into chunks

frekw Published at Dev

frekw

I'm trying to slice an ArrayController's content into chunks (for presentational purposes). Within each chunk I want to iterate over the items in order to render everything properly.

I've tried accomplishing this by writing a partition Handlebars block helper, which seems to work. However, when I try to loop over the content of each chunk, each throws the following error: "Assertion failed: The value that #each loops over must be an Array. You passed [object Object]"

helpers.js

Ember.Handlebars.registerHelper('partition', function(path, options){
  path = path === '' ? 'this' : path;
  var arr = [];
  var data = Ember.Handlebars.get(this, path, options).content;
  var ret = '';
  while(data.length){
    arr.push(data.splice(0, options.hash.size || 2));
  }
  for(var i = 0, len = arr.length; i < len; i++){
    ret = ret + options.fn(arr[i]);
  };
  return ret;
});

template.hbs

<h2>Your photos</h2>
{{#partition controller.photos size=2}}
  <div class="slide">
    {{#each this}}
      {{this.title}}
    {{/each}}
  </div>
  <br/><br/><br/>
{{/partition}}

this within the #partition is the correctly sized array.

How can I get this to work? Where is each getting its content from?

gist can be found here: https://gist.github.com/frekw/2d3627039b42891a0b0a

Scott

I solved your issue, see this JSBin for a demo.

In the helper I create a new Ember.Object containing the partitioned collection. This object is passed as the context to options.fn().
I added a with helper within the block to set the context for the each block.

{{#partition photos size=2}}
  <div class="slide">
    {{#with collection}}
      {{#each}}
        {{title}}
      {{/each}}
    {{/with}}
  </div>
  <br/><br/><br/>
{{/partition}}

The helper:

Ember.Handlebars.registerBoundHelper("partition", function(collection, options){

  var size = options.hash.size || 2;

  while(collection.length > 0)
  {
    var oc = Ember.Object.create({
      collection: collection.splice(0, size)
    });
    options.fn(oc);
  }

});

I hope this helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.