文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >无法使用related数据访问ember.js 2.0中的相关模型

问无法使用related数据访问ember.js 2.0中的相关模型
EN

Stack Overflow用户
提问于 2015-08-14 13:40:07
回答 3查看 277关注 0票数 0

我试图使用ember.js来显示一个简单的动态表单，这对于ember和前端框架来说是非常新的。

我在用

  • 成员: 2.0.0
  • 成员数据:2.0.0-1
  • jQuery : 1.11.3
  • 成员-cli: 1.13.6

JSON的有效负载如下:要生成一些字段，必须启用一些元素。

杰森：

代码语言：javascript
复制
{
    "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：

代码语言：javascript
复制
import DS from 'ember-data';

export default DS.Model.extend({
    formname: DS.attr(),
    createFields: DS.hasMany('createFields'),
    enableFields: DS.hasMany('enableFields')
});

创建-field.js.：

代码语言：javascript
复制
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.：

代码语言：javascript
复制
import DS from 'ember-data';

export default DS.Model.extend({
    field: DS.attr(),
    required: DS.attr('boolean'),
    widgetform: DS.belongsTo('widgetform')
});

模板

widgetform.hbs:哈佛商学院并不是所有的领域，它只是一个模型。

代码语言：javascript
复制
<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数据选项卡截图：

​

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

ember.js
ember-data
ember-cli
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-08-16 10:50:01

由于某些原因，RESTAdapter不适合这个特定的数据集或环境，所以我决定放弃它，采用新的JSONAPI1.0规范并使用JSONAPIAdapter。

型号：

创建-field.js.：

代码语言：javascript
复制
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

代码语言：javascript
复制
import DS from 'ember-data';

export default DS.Model.extend({
    field: DS.attr(),
    required: DS.attr('boolean')
});

widgetform.js

代码语言：javascript
复制
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/

代码语言：javascript
复制
{
  "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

代码语言：javascript
复制
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    namespace: 'api'
});

我可以像往常一样使用每个块从模板访问它。

widgetform.hbs

代码语言：javascript
复制
<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>

我希望这能帮到某人..。

票数 0
EN

Stack Overflow用户

发布于 2015-08-14 16:28:37

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

票数 0
EN

Stack Overflow用户

发布于 2015-08-14 17:38:52

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32011538

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档