Question

我正在创建一个看板/ trello SPA作为个人项目。 “委员会”有许多“列表”。一个“列表”包含许多“项目”，一个项目属于一个“列表”。扩展trello的列表功能，还可以在列表中对项目进行分组。

针对这些用例进行设计的最佳方法是什么？

用户也可以手动重新排列板上的项目-列表之间，列表内，列表内组内和组外。也可以将2个单个项目组合在一起，以使用该新组中的2个项目创建一个新组。

方法1： 所有项目保留对父级列表的引用。我在前端进行一些渲染以将项目适当地分组到obj1.groupid == obj2.groupid的地方。

我从项目列表开始，过滤掉不在组中的项目，然后在视图中的单个卡片上渲染这些项目。然后，我将剩下的数组减少为按groupId分组的项目。然后将这些分组的项目呈现在视图中的“组”卡上。我认为通过从视图中分离模型是正确的方法。

我写的简化输出：

var cards = [];

class List {
  constructor(items){
    this.items = items
  }
}

class Item {
  constructor(title, id,pos) {
    this.title = title;
    this.id = id;
    this.pos = pos;
  }
}

var list = new List([
  new Item("Football",),
  new Item("Rugby"),
  new Item("Cricket",1),
  new Item("Hockey",2),
  new Item("Cycling"),
  new Item("Swimming",1),
  new Item("Wrestling",2),
  new Item("Diving",2),
  new Item("Cricket",2),
  new Item("Running")
]);

for (var p = 0; p < list.items.length;p++){
  list.items[p].pos = p;
}

//create an array of items with a group id
var filteredList = list.items.filter(function(item){
    return item.id != null;
});

//create an array of items without a group id
var singleItems = list.items.filter(function(item){
  return item.id == null;
})

//move single items to the cards array first
for (var k = 0; k < singleItems.length; k++){
  cards.push(singleItems[k]);
}

//group remaining items by key:id
var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
var arraylist = groupBy(filteredList,'id');

//get the remapped array
var results = Object.keys(arraylist).map(function(key) {
  return [Number(key), arraylist[key]];
});

//push the new groups to the cards array
for (var i = 0; i < results.length; i++){
  cards.push(results[i]);
};

//format and display the cards array at item level
for (var c = 0; c < cards.length; c++){
  if (cards[c].length > 1){
    console.log('Card '+[c]+':')
    for (var l = 0; l < cards[c][1].length; l++){
      console.log('--> '+ [l] + ' ' + cards[c][1][l].title);
    }
  } else {
      console.log('Card '+[c]+':');
      console.log('-->'+ [l] + ' ' +cards[c].title);
  }
}

问题：如何跟踪视图中卡片的位置（列表中的索引），以便可以保存订单？组和项目存在于单独的数据库表中，因此尝试以这种方式进行跟踪似乎没有意义，但是如何在项目或组级别进行跟踪？

编辑后添加了混淆示例 渲染卡片以反映Item对象的pos，但是如何处理散发“项目组”的卡片，其中每个项目都有pos，但是用户选择了不同的方式来定位小组卡片，如下所示。我想我实际上想要控制的是卡的位置？

Card 0: pos 1
--> Football pos 1
Card 1: pos 2
--> Rugby pos 2
Card 2: pos 3
--> 0 Cricket pos 4
--> 1 Swimming pos 6
"Card 5:"pos 4
--> 0 Hockey pos 9
--> 1 Wrestling pos 8
--> 2 Diving pos 5
--> 3 Cricket pos 7

方法2 因此，列表可以具有多个组。一个组可以有多个项目。仅具有1个项目的组将在视图中的单个卡片上呈现。具有多个项目的组将在视图中的组卡上呈现。

**问题：**由于仅通过Group对象跟踪pos，因此使用此方法更容易跟踪位置。我看到在组之间移动项目很复杂。项目，列表和组通过这种方式变得更加紧密地耦合，不是吗？每个新项目都需要一个新组，将一个项目中具有单个项目的组中的一个项目添加到现有组中，则需要删除原始组或在数据库中存储空的Groups.items = 0，这似乎并不明智/有用。

赞赏任何建议

嵌套数组-跟踪对象在数组中的位置

0 个答案: