Javascript 余烬拖动排序：如何确定拖动列表中的新父级？

最初是在

对于嵌套列表，是否有方法在

dragEnd

操作中确定项目已被放入哪个“子列表”？（例如，类名、id等）

在我的场景中，我对可能属于彼此的余烬数据记录（即嵌套的“树”结构）进行排序。当我将一条嵌套记录“拖动”到另一条中（使拖动的记录成为第二条记录的子记录）时，我需要更新余烬数据中的父属性。我的问题是，如何将第二条记录（新父记录）的一些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

关系保持同步

下面是一个演示：

请注意，如果在拖动结束时自动保存记录，则应将保存包装到

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) // <--
    },
  }
}

{
行动：{
dragEnd（{sourceList，sourceIndex，targetList，targetIndex}）{
if（sourceList==targetList&&sourceIndex==targetIndex）返回
const draggedItem=sourceList.objectAt（sourceIndex）
constOldParent=draggedItem.get（'parent'）//