Question

我正在尝试使用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": "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：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}}属性可用，并打印在页面中。

我检查了很多像this这样的问题，一般的建议是添加id列表，但是我已经在JSON中添加了它们但我没有看到差异

ember-inspector数据选项卡的屏幕截图：

我在这里做错了什么？有什么想法吗？

Answer 1

尝试createFields: DS.hasMany('createField')（单数）

Answer 2

您没有指定Ember Data在模型之间建立连接所需的关系数据。

在create-field.js和enable-field.js中，您有widgetform: DS.belongsTo('widgetform')，但您没有在记录有效负载上指定widgetform_id: 1。您可以通过在inverse和belongsTo定义中明确设置hasMany选项来解决此问题，但我建议您只需将关系ID添加到有效负载中。

无法使用ember-data访问ember.js 2.0中的相关模型

2 个答案: