小编Asa*_*han的帖子

Ember      : 1.13.3
Ember Data : 1.13.5
jQuery     : 1.11.3

我正在尝试使用来自我的EmberJS客户端的ember-data向我的服务器发送JSON有效负载.我想在保存项目时将整个对象图发送到服务器,因为我不想发送多个请求.我不介意发送多个请求,但我担心如果其中一个请求在中间失败并且服务器上的数据不正确会发生什么.

我想使用JSONAPI(http://jsonapi.org/format/#document-compound-documents),因为它正在成为Ember中的默认适配器.此外,还有一些C#库可以处理这种格式,因此我认为它非常简单.但是,在阅读规范之后,如果没有id,我似乎无法嵌入对象.即使我{ async: false, embedded: 'always' })在DS.attr上指定,EmberJS也不会将子对象附加到JSON .

我的问题是:如果应用程序的使用方式是在客户端创建对象图,那么如何使用JSONAPI格式将整个对象图发送到服务器？我是否必须在客户端生成ID以满足JSONAPI标准？然后,一旦他们到达服务器,只需忽略它们,以便用ORM生成的id保存它们？

这是我的labelGroup模型:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  labels: DS.hasMany('label-model', { async: false, embedded: 'always' })
});

这是我的项目模型:

import DS from 'ember-data';

export default DS.Model.extend(DS.EmbeddedRecordsMixin, {
  name: DS.attr('string'),
  labelGroups: DS.hasMany('labelGroup', { async: false, embedded: 'always'})

});

这是我在项目上执行save()后得到的POST:

{
  "data":{
    "attributes":{"name":"Project"},
    "relationships":{
      "label-groups":{
        "data":[
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null},
         {"type":"label-groups","id":null}
       ]
     }
   },
   "type":"label-projects"
  } …

我有一个父组件,其模板包含来自https://www.npmjs.com/ember-cli-dropzonejs的dropzone组件:

{{drop-zone url='#' addRemoveLinks=true success=fileReceived}}

在父控制器中,我有一个调用的方法fileReceived,当成功事件在dropzone上触发时调用该方法.但是,我想在调用方法时调用存储在控制器上的其他方法fileReceived但我无法访问this.我尝试设置所谓的实例变量self来this上didInsertElement,但它给我的窗口,而不是我的分量.

这是我的父组件控制器:

import Ember from 'ember';

export default Ember.Component.extend({
  self:null,
  didInsertElement:function()
  {
    this.set('self', this);
  },
  fileReceived: function (file) {
    //Validate sheet

    this.sendAction('doStuff', file); //"this" returns a dropzone object instead of parentObject
    //this.doStuff(file);
  },
  actions: {
    doStuff: function (file) {
      //do stuff with the file
  }
});

我正在使用EmberJS CLI,我试图围绕组件.但是我不太明白他们之间沟通的最佳方式是什么.我正在尝试使用侧面菜单和画布制作一个简单的图形编辑器.我有一个"图形编辑器"组件,其中包含"side-menu"和"editor-canvas"组件作为子项.如果我在"侧面菜单"组件中选择"插入文本"等选项,如何告诉"编辑器画布"添加一些文本？

我听说过行动,数据下降.所以我应该将侧面菜单模型传递给画布进行观察(我可能还有一个菜单栏,可以告诉画布稍后再做一些事情,所以我也必须以某种方式观察)？因此,只要侧面菜单上的操作发生,它的模型就会更新,画布可以观察到它并对其进行更改吗？

或者是否有一种干净的方法将侧面菜单操作冒泡到父编辑器组件,然后捕获它并在画布组件上调用操作？

或者我应该使用视图和控制器(即使EmberJS似乎引导人们远离它们)而不是组件.那么图形编辑器的控制器可以捕获一个动作并使用controllerFor将它传递到editor-canvas上？

或者我应该使用Ember.Evented？

在我的主应用程序模板中,我有:

{{graphics-editor model=model}}

我的图形编辑器(graphics-editor.hbs)组件如下所示:

<div class="ui-layout-north nopadding">
  {{file-menu menuItems=model.fileMenu.menuItems}}
</div>
<div class="ui-layout-west">
  {{side-menu addLabel='addLabel'}}
</div>
<div class="ui-layout-center nopadding emptyBackground">
  {{editor-canvas canvasModel=model.canvas}}
</div>
<div class="ui-layout-south nopadding">
  {{editor-footer}}
</div>