Javascript 创建未附加到存储的余烬模型实例
我正在使用Ember 2.0和Ember data 2.0 在Rails中,使用模型的真实实例对表单和组件进行建模是非常常见的。对于Javascript 创建未附加到存储的余烬模型实例,javascript,ember.js,ember-data,ember-cli,ember-components,Javascript,Ember.js,Ember Data,Ember Cli,Ember Components,我正在使用Ember 2.0和Ember data 2.0 在Rails中,使用模型的真实实例对表单和组件进行建模是非常常见的。对于posts/new表单,您将传入Post.new并在form.html.erb模板中使用它 在余烬中,这变得很困难,因为调用newpost会创建一个损坏的模型。相反,我们鼓励您使用存储,并使用this.store.createRecord('post') 这很好,但在构建隔离构件时就不行了。例如,用户可以添加多个模型的表单,例如类别创建者。在我看来,结构如下: ac
posts/new
表单,您将传入Post.new
并在form.html.erb
模板中使用它
在余烬中,这变得很困难,因为调用newpost
会创建一个损坏的模型。相反,我们鼓励您使用存储,并使用this.store.createRecord('post')代码>
这很好,但在构建隔离构件时就不行了。例如,用户可以添加多个模型的表单,例如类别创建者。在我看来,结构如下:
actions: {
saveCategories(categories) {
let categoryRecords = categories.map((item) => {
return this.store.createRecord('category', { name: item.get('name') });
});
}
}
category表单/模板.hbs
<button {{action 'addCategory'}}>Add category</button>
{{#each categories as |category|}}
{{input value=category.name}}
{{/each}}
<button {{action 'save'}}>Save</button>
上面的示例确实有效,但需要this.store.createRecord
。但据我所知,该组件无法访问存储。这是明智的,因为这将是扰乱全球国家的因素。另外,当使用createRecord
时,如果用户导航离开而不保存模型,则商店中会有大量剩余模型
我希望本例中的类别表单
组件与全局状态的其余部分完全隔离
我的问题是,如何使用ember逻辑正确处理此问题?您编写的所有内容都是正确的,并且被认为是一种良好的模式-您的组件在没有存储的情况下工作,并且它们的某些父级(最好是路由,但可能是控制器)正在处理将这些数据持久化到API的过程
在您的示例中,您根本不必在组件中使用存储
。您可以在每个addCategory
操作执行上创建一些Ember.Object
实例,这些实例将发送给您的父级。此父对象将获取Ember.Object的数组
,将要使用的属性复制到模型实例并保存它们
import Ember from 'ember';
export default Ember.Component.extend({
categories: [],
actions: {
addCategory() {
this.get("categories").pushObject(Ember.Object.create({
name: ''
});
},
save() {
this.sendAction("saveCategories", this.get("categories"));
}
}
});
在您的路线中,您可以执行以下操作:
actions: {
saveCategories(categories) {
let categoryRecords = categories.map((item) => {
return this.store.createRecord('category', { name: item.get('name') });
});
}
}
另一方面,如果您需要余烬数据模型的某些功能作为关系,您实际上可以将操作addCategory
发送到路由/控制器,创建模型并作为绑定传递到该组件:
{{category-form categories=categories saveCategories="saveCategories" addCategory="addCategory}}
然后在路线/控制器中:
categories: [],
actions: {
addCategory() {
this.get('categories').pushObject(this.store.createRecord('category'));
},
saveCategories() {
this.get('categories')... // do what you want with them
}
}
这听起来很合乎逻辑,但我想知道后一种方法,例如,如果我有一个相当复杂的模型(让我们想象一下类别模型有很多关系),我制作一个类别表单
,将所有动作都冒泡到路由或控制器,我基本上会复制编辑路由中的逻辑,还有创建路线。。。。你会怎么处理这件事?例如,创建一个临时DTO?我认为您不会复制任何逻辑。在您的组件中,即使您有两个操作,所有操作都只是发送它们。所有的逻辑都在一个地方——路线或控制器。如果两个路由或控制器共享相同的逻辑,那么它是使用Ember.Mixin并将该逻辑提取到Mixin的最佳位置。什么是临时DTO?DTO只是一个Java ism,它是一个包含所有属性和字段但没有附加逻辑的类,可以在系统中传递。数据传输对象。但我会尝试mixin方法,它看起来很不错!非常感谢