Enumerable Objects (key value maps) in Ember.js

Question

Is there a key value object in Ember that supports Ember.Array / Ember.Enumerable?

I would like to iterate over them with {{#each}} in my Handlebars templates.

My use case is displaying arbitrary JSON (user define fields) from the server (example given below). I can recursively create views from nested arrays (using the each helper) but I can't iterate over an object. My plan is to find (or write) an object that will wrap JSON objects and allow them to be enumerable. What would be the best way to go about doing this?

My idea so far is so combination of extending/mixing Enumerable/Array/ArrayProxy/ObjectProxy, storing the underlying key-value store as an Ember.Array, and adding a keys field to store the keys for the object. I can then use setUnknownProperty and unknownProperty to set/get the underlying value and keep the keys in sync. Is this approach sound?

Format of JSON from the server

Here's an example (user documents their own workout data). Note that this is just one example; the format is entirely flexible, so I can't create Ember-data models to model these user defined fields. Overall, the data can be arbitrarily complex JSON (any degree of nesting of hashes, arrays, primitives)

{
   "bench_press":[
      {
         "weight":95,
         "repetitions":5,
         "tags":[
            "warmup"
         ]
      },
      {
         "weight":135,
         "repetitions":3,
         "tags":[
            "warmup"
         ]
      },
      {
         "weight":155,
         "repetitions":3,
         "tags":[
            "warmup"
         ]
      },
      {
         "weight":165,
         "repetitions":2,
         "tags":[
            "warmup"
         ]
      },
      {
         "weight":185,
         "repetitions":1,
         "tags":[
            "warmup"
         ]
      },
      {
         "weight":195,
         "repetitions":1,
         "tags":[
            "warmup",
            "overshoot"
         ]
      },
      {
         "weight":190,
         "repetitions":5,
         "tags":[

         ]
      },
      {
         "weight":190,
         "repetitions":5,
         "tags":[

         ]
      },
      {
         "weight":190,
         "repetitions":5,
         "tags":[

         ]
      },
      {
         "weight":190,
         "repetitions":3,
         "tags":[

         ]
      },
      {
         "weight":190,
         "repetitions":2,
         "tags":[
            "negatives"
         ]
      }
   ]
}

How arbitrary is your json? Can you post some sample data that shows different formats you want to support and how you want to iterate over them? I am no expert, but I think that would be very helpful. — Aras
@Aras I just updated the question with some examples. Basically, the data format can be anything because it's all user defined... — Sherwin Yu
you should take a look at a new router API: emberjs.com/guides/controllers/…. It allows to iterate through objects using each helper. — Alex Navasardyan

penkovsky penkovsky · Accepted Answer · 2013-03-01T21:10:51

As far as I get Ember.js philosophy, declarative Handlebars templates are conservative enough to emphasize using less logic in your templates.

In the above case I suggest you using ContainerView providing JSON as a context for it.

Enumerable Objects (key value maps) in Ember.js

1 Answers