无法使用ember-data访问ember.js 2.0中的相关模型 [英] Couldn't access related models in ember.js 2.0 using ember-data
问题描述
我正在尝试使用ember.js来显示一个简单的动态表单，一般来说，这是一个非常新的ember和前端框架。
我正在使用
- Ember：2.0.0
- Ember数据：2.0.0-beta.1
- jQuery：1.11.3
- ember-cli：1.13.6
JSON有效载荷如下：要生成一些字段，并且必须启用一些元素。
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：选择广告系列，
工具提示：选择广告系列，
类别：选择，
url：campaign /，
required：false，
widgetform_id：1
}，{
id：4，
field：checkbox，
标签：样本复选框，
工具提示：样本复选框，
类别：复选框，
url：，
：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，
必需：false，
widgetform_id：1
}，{
id：6，
field：reqType，
required ：false，
widgetform_id：1
}，{
id：7，
field：dataFormat，
required ，
widgetform_id：1
}，{
id：8，
field：appendUrlParams，
required：false，
widgetform_id：1
}]，
widgetforms：[{
id：1，
formname：编辑小部件，
enable-field_ids：[1，2，3，4，5，6，7，8]，
create-field_ids：[1，2，3，4]
} ]
}
//模型
widgetform.js：
从ember-data导入DS;
export default DS.Model.extend（{
formname：DS.attr（），
createFields：DS.hasMany（'createFields'），
enableFields： DS.hasMany（'enableFields'）
}）;
create-field.js：
从ember-data导入DS;
导出默认DS.Model.extend（{
字段：DS.attr（），
标签：DS.attr（），
工具提示：DS.attr （），
category：DS.attr（），
url：DS.attr（'string'，{defaultValue：}），
需要：DS.attr（'boolean' ），
widgetform：DS.belongsTo（'widgetform'）
}）;
enable-field.js：
从ember-data导入DS;
export default DS.Model.extend（{
field：DS.attr（），
required：DS.attr（'boolean'），
widgetform： DS.belongsTo（'widgetform'）
}）;
模板
widgetform.hbs： 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>
到目前为止，我已经能够使用Chrome中的ember-inspector查看相应模型中的数据。
然而，在使用 {{form.createFields}} 的模板中，我得到一个< DS.PromiseManyArray> ，而 {{form.createFields.content}} 是一个这两个我无法遍历的DS.ManyArray> 对象。
我放在模板中的 test1 不在页面中打印。然而， {{form.formname}} 属性可用，并打印在页面中。
我检查过很多问题，如
我在这里做错什么？任何想法？
由于某些原因，RESTAdapter不适用于特定的数据集或环境，所以我决定废除并拥抱新的JSONAPI 1.0规范，并使用JSONAPIAdapter。
型号：
create-field.js：
从ember-data导入DS;
导出默认DS.Model.extend（{
字段：DS.attr（），
标签：DS.attr（），
工具提示：DS.attr （），
category：DS.attr（），
url：DS.attr（'string'，{defaultValue：}），
需要：DS.attr（'boolean' ）
}）;
enable-field.js
从ember-data导入DS;
导出默认DS.Model.extend（{
字段：DS.attr（），
必需：DS.attr（'boolean'）
}）;
widgetform.js
从ember-data导入DS;
导出默认DS.Model.extend（{
formname：DS.attr（），
createFields：DS.hasMany（'create-field'），
enableFields：DS.hasMany（'enable-field'）
}）;
上述模型的JSON格式为JSONAPI 1.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
}]
}，
启用字段：{
data：[{
type：enable-fields，
id：1
}，{
type：enable-fields，
id：2
}]
}
}]，
included：[{
type：create-fields，
id：1
attributes：{
field：widgetN ame，
label：Widget Name，
tooltip：Widget Name，
category：textfield，
required
}
}，{
type：create-fields，
id：2，
attributes：{
field：APIKey，
label：API Key，
tooltip：API Key，
category：textfield，
required：true
}
}，{
type：enable-fields，
id：1，
：{
field：showAdvanced，
required：false
}
}，{
type：enable-fields
id：2，
attributes：{
field：notification，
required：false
}
}]
}
适配器：
application.js
从ember-data导入DS;
导出默认DS.JSONAPIAdapter.extend（{
命名空间：'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>
我希望它帮助某人...
I'm trying to display a simple dynamic form using ember.js, im pretty new to ember and front-end frameworks in general.
I am using
- Ember : 2.0.0
- Ember Data : 2.0.0-beta.1
- jQuery : 1.11.3
- ember-cli : 1.13.6
The JSON payload is the following: some fields are to be generated and some elements have to be enabled.
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]
}]
}
//models
widgetform.js:
import DS from 'ember-data';
export default DS.Model.extend({
formname: DS.attr(),
createFields: DS.hasMany('createFields'),
enableFields: DS.hasMany('enableFields')
});
create-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')
});
enable-field.js:
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
required: DS.attr('boolean'),
widgetform: DS.belongsTo('widgetform')
});
template
widgetform.hbs: The hbs doesn't have all the fields it is just a mockup.
<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>
So far I've been able to see the data in the respective models using ember-inspector in chrome.
However, in the template when using the {{form.createFields}} I get a <DS.PromiseManyArray>, and the {{form.createFields.content}} is a <DS.ManyArray> object both of which I couldn't iterate through.
The test1 that I put in the template is not printing in the page. The {{form.formname}} property however is available and is printed in the page.
I've checked many questions like this, and the general suggestion is to add the id list but I've added them in the JSON but I don't see the difference
screenshot of ember-inspector data tab:
What am I doing wrong here? Any ideas?
For some reason the RESTAdapter was not working for this particular data set or environment, so I decided to scrap it and embrace the new JSONAPI 1.0 specs and use the JSONAPIAdapter.
Models:
create-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')
});
The JSON for the above model is formatted as per the JSONAPI 1.0 spec: 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
}
}]
}
adapter: application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
namespace: 'api'
});
And I was able to access it from the template using the each block as usual
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>
I hope it helps someone...
这篇关于无法使用ember-data访问ember.js 2.0中的相关模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
