余烬拖动排序:如何确定拖动列表中的新父项



最初由@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

最新更新