ember : 관련 모델이 크롬 검사기에 표시되지만 템플릿이 비어 있습니다.

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); 
    }, 
}); 

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

템플릿을 기록합니다. RESTAdapter

<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

는 속성 이름 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> 

또는 당신은 예

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

재산에 속성을 바인딩 바인딩 - ATTR를 사용해야합니다 : http://emberjs.jsbin.com/OxIDiVU/1077/edit