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

enter image description here

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

模板 - 名称和品牌等其他属性正确显示。

<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

ember：相关模型出现在chrome inspecter中，但在模板中为空

1 个答案: