How can I make Ember.js handlebars #each iterate over objects?

Question

I'm trying to make the {{#each}} helper to iterate over an object, like in vanilla handlebars. Unfortunately if I use #each on an object, Ember.js version gives me this error:

Assertion failed: The value that #each loops over must be an Array. You passed [object Object]

I wrote this helper in attempt to remedy this:

Ember.Handlebars.helper('every', function (context, options) {
  var oArray = [];
  for (var k in context) {
    oArray.push({
      key   : k,
      value : context[k]
    })
  }
  return Ember.Handlebars.helpers.each(oArray, options);
});

Now, when I attempt to use {{#every}}, I get the following error:

Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.

This seems like a basic feature, and I know I'm probably missing something obvious. Can anyone help?

Edit:

Here's a fiddle: http://jsfiddle.net/CbV8X/

Answer 1

Use {{each-in}} helper. You can use it like like {{each}} helper.

Example:

{{#each-in modelWhichIsObject as |key value|}}
  `{{key}}`:`{{value}}`
{{/each-in}}

JS Bin demo.

Answer 2

I've been after similar functionality, and since we're sharing our hacky ways, here's my fiddle for the impatient: http://jsfiddle.net/L6axcob8/1/

This fiddle is based on the one provided by @lxe, with updates by @Kingpin2k, and then myself.

Ember: 1.9.1, Handlebars: 2.0.0, jQuery 2.1.3

---

Here we are adding a helper called every which can iterate over objects and arrays.

For example this model:

model: function() {
    return {
        properties: {
            foo: 'bar',
            zoo: 'zar'
        }
    };
}

can be iterated with the following handlebars template:

<ul class="properties">
    {{#every p in properties}}
    <li>{{p.key}} : {{p.value}}</li>
    {{/every}}
</ul>

---

every helper works by creating an array from the objects keys, and then coordinating changes to Ember by way of an ArrayController. Yeah, hacky. This does however, let us add/remove properties to/from an object provided that object supports observation of the [] property.

In my use case I have an Ember.Object derived class which notifies [] when properties are added/removed. I'd recommend looking at Ember.Set for this functionality, although I see that Set been recently deprecated. As this is slightly out of this questions scope I'll leave it as an exercise for the reader. Here's a tip: setUnknownProperty

---

To be notified of property changes we wrap non-object values in what I've called a DataValueObserver which sets up (currently one way) bindings. These bindings provide a bridge between the values held by our internal ArrayController and the object we are observing.

When dealing with objects; we wrap those in ObjectProxy's so that we can introduce a 'key' member without the need to modify the object itself. Why yes, this does imply that you could use #every recursively. Another exercise for the reader ;-)

I'd recommend having your model be based around Ember.Object to be consistent with the rest of Ember, allowing you to manipulate your model via its get & set handlers. Alternatively, as demonstrated in the fiddle, you can use Em.Get/Em.set to access models, as long as you are consistent in doing so. If you touch your model directly (no get/set), then every won't be notified of your change.

Em.set(model.properties, 'foo', 'asdfsdf');

---

For completeness here's my every helper:

var DataValueObserver = Ember.Object.extend({
    init: function() {
        this._super();
        // one way binding (for now)
        Em.addObserver(this.parent, this.key, this, 'valueChanged');
    },
    value: function() {
        return Em.get(this.parent, this.key);
    }.property(),
    valueChanged: function() {
        this.notifyPropertyChange('value');
    }
});

Handlebars.registerHelper("every", function() {
    var args = [].slice.call(arguments);
    var options = args.pop();
    var context = (options.contexts && options.contexts[0]) || this;

    Ember.assert("Must be in the form #every foo in bar ", 3 == args.length && args[1] === "in");
    options.hash.keyword = args[0];
    var property = args[2];

    // if we're dealing with an array we can just forward onto the collection helper directly
    var p = this.get(property);
    if (Ember.Array.detect(p)) {
        options.hash.dataSource = p;
        return Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);
    }

    // create an array that we will manage with content
    var array = Em.ArrayController.create();
    options.hash.dataSource = array;
    Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);

    //
    var update_array = function(result) {
        if (!result) {
            array.clear();
            return;
        }

        // check for proxy object
        var result = (result.isProxy && result.content) ? result.content : result;
        var items = result;

        var keys = Ember.keys(items).sort();

        // iterate through sorted array, inserting & removing any mismatches
        var i = 0;
        for ( ; i < keys.length; ++i) {
            var key = keys[i];
            var value = items[key];
            while (true) {
                var old_obj = array.objectAt(i);
                if (old_obj) {
                    Ember.assert("Assume that all objects in our array have a key", undefined !== old_obj.key);
                    var c = key.localeCompare(old_obj.key);
                    if (0 === c) break; // already exists
                    if (c < 0) {
                        array.removeAt(i); // remove as no longer exists
                        continue;
                    }
                }

                // insert
                if (typeof value === 'object') {
                    // wrap object so we can give it a key
                    value = Ember.ObjectProxy.create({
                        content: value,
                        isProxy: true,
                        key: key
                    });
                    array.insertAt(i, value);
                } else {
                    // wrap raw value so we can give it a key and observe when it changes
                    value = DataValueObserver.create({
                        parent: result,
                        key: key,
                    });
                    array.insertAt(i, value);
                }
                break;
            }
        }
        // remove any trailing items
        while (array.objectAt(i)) array.removeAt(i);
    };

    var should_display = function() {
        return true;
    };

    // use bind helper to call update_array if the contents of property changes
    var child_properties = ["[]"];
    var preserve_context = true;
    return Ember.Handlebars.bind.call(context, property, options, preserve_context, should_display, update_array, child_properties);
});

Inspired by:

• How can I make Ember.js handlebars #each iterate over objects?
• http://mozmonkey.com/2014/03/ember-getting-the-index-in-each-loops/
• https://github.com/emberjs/ember.js/issues/4365
• https://gist.github.com/strathmeyer/1371586

Here's that fiddle again if you missed it:

• http://jsfiddle.net/L6axcob8/1/

Answer 3

After fiddling with it for a few hours, I came up with this hacky way:

Ember.Handlebars.registerHelper('every', function(context, options) {
  var oArray = [], actualData = this.get(context);

  for (var k in actualData) {
    oArray.push({
      key: k,
      value: actualData[k]
    })
  }

  this.set(context, oArray);
  return Ember.Handlebars.helpers.each.apply(this, 
      Array.prototype.slice.call(arguments));
});

I don't know what repercussions this.set has, but this seems to work!

Here's a fiddle: http://jsfiddle.net/CbV8X/1/