ember: похожая модель появляется в Chrome Inspeter, но пуста в шаблоне

Question

У меня есть следующий код, который успешно загружает одежду. Инспектор Chrome ember показывает, что и Garment, и связанная с ним модель загружены, но я не могу отобразить связанную модель (garment_colors) в шаблоне.

Буду очень признателен за любую помощь!

{{log garment_colors}} записывает пустой массив 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);
    },
});

Мой джсон

{
   "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"
      }
   ]
}

Шаблон - другие атрибуты, такие как название и бренд, отображаются правильно.

<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

RESTAdapter ожидает, что имя атрибута будет garment_colors,

 "garment_colors":[
     66,
     67,
     68
  ]

Добавление таких значений в руле не поддерживается, в зависимости от определенных версий это добавит метаморфические теги в html.

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

Вам либо нужно сделать его несвязанным, что вставит его прямо в шаблон, но не будет привязано к модели.

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

Или вам нужно использовать bind-attr для привязки атрибута к свойству

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

Пример: http://emberjs.jsbin.com/OxIDiVU/1077/edit