最初由@andrewsyd在GitHub上提出。
对于嵌套列表,是否有一种方法可以确定在
dragEnd
操作中项目已被放入哪个"子列表"?(例如类名、id等)在我的场景中,我对可以属于彼此的成员数据记录进行排序(即嵌套的"树"结构)。当我将一个嵌套记录"拖"到另一个(使拖动的记录成为第二个记录的子记录)时,我需要更新ember数据中的父属性。我的问题是,如何将第二条记录(新父记录)的一些id传递给
dragEnd
操作?这可能吗?
解决方案0:调整数据模型,将isParent
属性转换为派生值,而不是真相来源
首先,拥有必须手动更新的isParent
属性是一种有缺陷的方法。
如果您将isParent
状态作为一个属性,并要求前端更新它,那么您就有两个真相来源,它们可能(并最终)不同步。特别是考虑到用户可以篡改对API后端的网络请求。
isParent
应该从孩子的数量中推断出来。它可以是一个简单的计算属性:
{
isParent: computed('children.[]', function () {
return this.get('children.length') > 0
}
}
后端也可以使用类似的方法。
如果您不控制后端,仍然需要从前端更新isParent
属性,我建议您在序列化过程中破解序列化程序,将isParent
计算的属性值包含在有效负载中。
虽然我坚信你应该采用这个解决方案,但我在下面研究了几个替代方案。
解决方案1:使用观察器自动更新父状态
在您的模型中:
{
updateParentState: Ember.observer('children.[]', function () {
const isParent = this.get('children.length') > 0
this.setProperties({isParent})
})
}
这将使isParent
属性在更新时与其children
关系保持同步。
下面是一个演示:https://ember-twiddle.com/f1c737d3bc106cb9cca071fd01fe334f?openFiles=models.item.js%2C
请注意,如果在拖动结束时自动保存记录,则应将保存包装到Ember.run.next
中,以便在观察者触发后进行保存。
解决方案2:访问拖动项目的新旧父项
假设你有这样的关系:
export default Model.extend({
isParent: attr('boolean'),
parent: belongsTo('item', {inverse: 'children'}),
children: hasMany('item', {inverse: 'parent'}),
})
您可以在拖动结束操作中访问拖动项的旧父项和新父项!
{
actions : {
dragEnd ({sourceList, sourceIndex, targetList, targetIndex}) {
if (sourceList === targetList && sourceIndex === targetIndex) return
const draggedItem = sourceList.objectAt(sourceIndex)
const oldParent = draggedItem.get('parent') // <--
sourceList.removeAt(sourceIndex)
targetList.insertAt(targetIndex, draggedItem)
const newParent = draggedItem.get('parent') // <--
newParent.set('isParent', newParent.get('children.length') > 0) // <--
oldParent.set('isParent', oldParent.get('children.length') > 0) // <--
},
}
}
我已经用箭头注释标记了相关行。
请看,在移动拖动的项目之前,您读取了该项目的旧父级。移动该项目后,您读取的是新父级。这是可能的,因为Ember Data会自动执行关系记账。
最后,更新双亲的isParent
状态。
演示:https://ember-twiddle.com/ab0bfdce6a1f5ad4bd0d1c9c45f642fe?openFiles=controllers.application.js%2Ctemplates.components.the-项目.hbs