ember: related model appears in chrome inspecter but empty in template

Question

I've got the following code that successfully loads a garment. Chrome ember inspector shows that both Garment and its related model have loaded but I can't seem to display the related model (garment_colors) in the template.

Would really appreciate any help!

{{log garment_colors}} logs an empty array Class {type: function, content: Array[0], store: Class, _changesToSync: OrderedSet, loadingRecordsCount: 0…}__ember1410723197678: "ember522"__ember_meta__: Object__nextSuper: undefined_changesToSync: OrderedSetcontent: Array[0]isLoaded: trueisPolymorphic: undefinedloadingRecordsCount: 0name: "garment_colors"owner: Classstore: ClasstoString: function () { return ret; }type: App.GarmentColor__proto__: Object ember-1.7.0.js:14463

var attr = DS.attr,
    belongsTo = DS.belongsTo,
    hasMany = DS.hasMany;

App.Garment = DS.Model.extend({
    name: attr(),
    brand: attr(),
    description: attr(),
    materials: attr(),
    garment_colors: hasMany('garmentColor')
});

App.GarmentColor = DS.Model.extend({
  name: attr(),
  color: attr(),
  garment: belongsTo('garment')
});



App.DesignerRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('garment',params.id);
    },
    setupController: function(controller, model) {
        controller.set('content', model)
        console.log(model);
    },
});

My json

{
   "garment":{
      "id":2,
      "name":"Ultra shirt",
      "brand":"Gildan",
      "description":"this is the description",
      "materials":"5.6 oz. 50% preshrunk cotton, 50% polyester.",
      "garment_color_ids":[
         66,
         67,
         68
      ]
   },
   "garment_colors":[
      {
         "id":66,
         "name":"Purple",
         "color":"#4f237a"
      },
      {
         "id":67,
         "name":"Light Blue",
         "color":"#89b4df"
      },
      {
         "id":68,
         "name":"Carolina Blue",
         "color":"#91b0e6"
      }
   ]
}

Template - other attributes like name and brand display properly.

<script type="text/x-handlebars" data-template-name="designer">
    {{outlet}}
    <div id="product-details">
        <h4>Style</h4>
        <p id="name">{{name}}</p>
        <p id="brand">{{brand}}</p>
        <p id="description">{{description}}</p>
        <p id="materials">{{materials}}</p>
        <h4>Color</h4>

        {{log garment_colors}}
        <div id="color-list">
            {{#each garment_colors}}
                <label class="btn" style="background-color:{{color}}">
                    <input type="radio" name="color" value="{{name}}"> 
                </label>
            {{/each}}
        </div>
    </div>
</script>

Answer 1

The RESTAdapter expects the attribute name to be garment_colors.

 "garment_colors":[
     66,
     67,
     68
  ]

Adding in values like this isn't supported in handlebars, depending on certain versions it will add metamorph tags into the html.

 <label class="btn" style="background-color:{{color}}">
    <input type="radio" name="color" value="{{name}}"> 
 </label>

You'll either need to make it unbound, which will inject it right into the template, but won't be bound to the model.

 <label class="btn" style="background-color:{{unbound color}}">
    <input type="radio" name="color" value="{{unbound name}}"> 
 </label>

Or you'll need to use bind-attr to bind the attribute to the property

 <label class="btn" {{bind-attr style=someProperty}}>
    <input type="radio" name="color"  {{bind-attr value=name}}> 
 </label>

Example: http://emberjs.jsbin.com/OxIDiVU/1077/edit