无法使用related数据访问ember.js 2.0中的相关模型
无法使用related数据访问ember.js 2.0中的相关模型
提问于 2015-08-14 13:40:07
我试图使用ember.js来显示一个简单的动态表单，这对于ember和前端框架来说是非常新的。
我在用
- 成员: 2.0.0
- 成员数据:2.0.0-1
- jQuery : 1.11.3
- 成员-cli: 1.13.6
JSON的有效负载如下:要生成一些字段，必须启用一些元素。
杰森：
{
"create-fields": [{
"id": 1,
"field": "widgetName",
"label": "Widget Name",
"tooltip": "Widget Name",
"category": "textfield",
"url": "",
"required": true,
"widgetform_id": 1
}, {
"id": 2,
"field": "APIKey",
"label": "API Key",
"tooltip": "API Key",
"category": "textfield",
"url": "",
"required": true,
"widgetform_id": 1
}, {
"id": 3,
"field": "Campaign",
"label": "Select Campaign",
"tooltip": "Select Campaign",
"category": "select",
"url": "campaigns/",
"required": false,
"widgetform_id": 1
}, {
"id": 4,
"field": "checkbox",
"label": "Sample Checkbox",
"tooltip": "Sample Checkbox",
"category": "checkbox",
"url": "",
"required": false,
"widgetform_id": 1
}],
"enable-fields": [{
"id": 1,
"field": "showAdvanced",
"required": false,
"widgetform_id": 1
}, {
"id": 2,
"field": "notification",
"required": false,
"widgetform_id": 1
}, {
"id": 3,
"field": "enableNotif",
"required": false,
"widgetform_id": 1
}, {
"id": 4,
"field": "email",
"required": false,
"widgetform_id": 1
}, {
"id": 5,
"field": "phone",
"required": false,
"widgetform_id": 1
}, {
"id": 6,
"field": "reqType",
"required": false,
"widgetform_id": 1
}, {
"id": 7,
"field": "dataFormat",
"required": false,
"widgetform_id": 1
}, {
"id": 8,
"field": "appendUrlParams",
"required": false,
"widgetform_id": 1
}],
"widgetforms": [{
"id": 1,
"formname": "Edit Widget",
"enable-field_ids": [1, 2, 3, 4, 5, 6, 7, 8],
"create-field_ids": [1, 2, 3, 4]
}]
}//模型
widgetform.js：
import DS from 'ember-data';
export default DS.Model.extend({
formname: DS.attr(),
createFields: DS.hasMany('createFields'),
enableFields: DS.hasMany('enableFields')
});创建-field.js.：
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
label: DS.attr(),
tooltip: DS.attr(),
category: DS.attr(),
url: DS.attr('string', {defaultValue: ""}),
required: DS.attr('boolean'),
widgetform: DS.belongsTo('widgetform')
});启用-field.js.：
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
required: DS.attr('boolean'),
widgetform: DS.belongsTo('widgetform')
});模板
widgetform.hbs:哈佛商学院并不是所有的领域，它只是一个模型。
<div class="container-fluid">
{{#each model as |form|}}
<form class="form-horizontal">
<fieldset>
<header id="header">
<h1>{{form.formname}}</h1>
</header>
<section id="main">
<ul id="field-list">
{{form.createFields}}
{{#each form.createFields as |element|}}
<li>test1 {{element.field}}</li>
{{/each}}
</ul>
</section>
</fieldset>
</form>
{{/each}}
</div> 到目前为止，我已经能够在各自的模型中看到数据，使用铬中的余烬检查器。
但是，在使用{{form.createFields}}的模板中，我得到了一个<DS.PromiseManyArray>，而{{form.createFields.content}}是一个<DS.ManyArray>对象，我无法遍历这两个对象。
我放在模板中的test1不在页面中打印。但是，{{form.formname}}属性是可用的，并打印在页面中。
我检查了许多像this这样的问题，一般的建议是添加id列表，但是我在JSON中添加了它们，但我看不出区别
ember数据选项卡截图：
我在这里做错什么了？有什么想法吗？
Stack Overflow用户
回答已采纳
发布于 2015-08-16 10:50:01
由于某些原因，RESTAdapter不适合这个特定的数据集或环境，所以我决定放弃它，采用新的JSONAPI1.0规范并使用JSONAPIAdapter。
型号：
创建-field.js.：
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
label: DS.attr(),
tooltip: DS.attr(),
category: DS.attr(),
url: DS.attr('string', { defaultValue: ""}),
required: DS.attr('boolean')
});enable-field.js
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
required: DS.attr('boolean')
});widgetform.js
import DS from 'ember-data';
export default DS.Model.extend({
formname: DS.attr(),
createFields: DS.hasMany('create-field'),
enableFields: DS.hasMany('enable-field')
});上述模型的JSON格式为JSONAPI1.0规范：http://jsonapi.org/format/
{
"data": [{
"type": "widgetform",
"id": 1,
"attributes": {
"formname": "Edit Widget"
},
"relationships": {
"create-fields": {
"data": [{
"type": "create-fields",
"id": "1"
}, {
"type": "create-fields",
"id": "2"
}]
},
"enable-fields": {
"data": [{
"type": "enable-fields",
"id": "1"
}, {
"type": "enable-fields",
"id": "2"
}]
}
}
}],
"included": [{
"type": "create-fields",
"id": "1",
"attributes": {
"field": "widgetName",
"label": "Widget Name",
"tooltip": "Widget Name",
"category": "textfield",
"required": true
}
}, {
"type": "create-fields",
"id": "2",
"attributes": {
"field": "APIKey",
"label": "API Key",
"tooltip": "API Key",
"category": "textfield",
"required": true
}
}, {
"type": "enable-fields",
"id": "1",
"attributes": {
"field": "showAdvanced",
"required": false
}
}, {
"type": "enable-fields",
"id": "2",
"attributes": {
"field": "notification",
"required": false
}
}]
}适配器: application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
namespace: 'api'
});我可以像往常一样使用每个块从模板访问它。
widgetform.hbs
<div class="container-fluid">
{{#each model as |form|}}
<form class="form-horizontal">
<fieldset>
<header id="header">
<h1>{{form.formname}}</h1>
</header>
<section id="main">
<ul id="field-list">
{{#each form.createFields as |element|}}
<li>
<input name="{{element.field}}" type="text">
</li>
{{/each}}
</ul>
</section>
</fieldset>
</form>
{{/each}}
</div>我希望这能帮到某人..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32011538
复制相关文章
相似问题
腾讯云开发者
