Implementing custom ember each handlebar helper

Question

I am trying to implement helper for following situation:

{{#inRange collection 1 3}}
    {{view App.SomeView content=this}}
{{/inRange}}

So purpose of this helper is to render only few items in some collection -> this is specified by second and third argument -> begin and end.

So far, I am trying with something like this:

Ember.Handlebars.registerHelper('inRange', function (collection, start, end, options) {
  var res = '';
  var data = Ember.Handlebars.get(this, collection);
  data = data.slice(start, end);

  data.forEach(function (item) {
    res += options.fn(item);
  });

  return res;
});

But this doesn't work if I need to render view inside block helper. I looked into native Ember each implementation, but they are doing it on some other way. They use something like this:

options.hash.dataSourceBinding = path;
return Ember.Handlebars.helpers.collection.call(this, 'Ember.Handlebars.EachView', options);

Problem with this is because I can't find any documentation about these lines of code.

Does anyone knows how I can make custom each helper, or knows something about how Ember each is working internally?

thecodejack thecodejack · Accepted Answer · 2014-06-02T06:50:58

I would like to learn the same. But in your case rather than creating your own handlebar, its better to create a sub-collection as a property and pass it to each helper.

in View class

subCollection: function(){
   var collection = this.get('collection');
   return collection.slice(1,3);
}.property()

in handlebars

{{#each subCollection}}
    {{view App.SomeView content=this}}
{{/each}}

Implementing custom ember each handlebar helper

1 Answers