Backbone.js 在主干收集中包装项目？

我不断遇到一些令人困惑的解决方案，以及使用主干将匹配项包装到div中的不明确方法

我正在为自己构建一个简单的示例，并希望将所有模型嵌套在一个集合中，该集合具有相同的属性

team

，使用

comparator

可以很好地组织列表，但就我的一生而言，我找不到一个清晰的解决方案来包装每一个，这样我就可以更好地控制团队中的

球员名单

对于像我这样的初学者，必须有一个清晰简单的解决方案。我真的只想让事情尽可能的干净和简单。我想要的html结果如下所示

<div class="pacers">
    <li>Paul</li>
    <li>Roy</li>
</div>
<div class="bulls">
    <li>Kirk</li>
    <li>Taj</li>
</div>

 [
  {
    "name": "Paul",
    "team": "pacers"
  },
  {
    "name": "Kirk",
    "team": "bulls"
  },
  {
    "firstname": "George",
    "team": "pacers"
  },
  {
    "name": "Taj",
    "team": "bulls"
  }
]

所以使用比较器是很棒的，我只是写了一个比较器：'team'

，它为我处理列表顺序，很酷，但是我没有太多的控制权，我想用一个更层次化的系统来包装列表

这可以在一个非常疯狂的视图模板中处理（取决于您的模板语言）。。。或者，您可以使用更简单的模板/视图，只进行一些更疯狂的集合查询（首先使用pull获取团队，对该数组进行重复数据消除，然后为每个团队运行一些where's…但是您可以看到这是如何变得疯狂的）

我投票赞成视图，视图模板应该处理这个。。。你在用什么？玉？胡子

类似于以下内容-此处为逻辑psuedo代码，因为我不知道您的模板语言：

var team;
forEach player in players 
if(!team) {
   set team = player.team
   print open holder and then the first row
} (team !== player.team {
   set team = player.team
   print close of previous holder, then open holder and then the first row of new team
} else {
   print just the player row
}

---

即使如此，你也可以看到这本身有点脏。。。但是您所描述的是一个视图/表示方面的问题，您可以在这里进行，而无需新的附加循环和映射，也无需在何处进行操作（就像在调用视图之前在数据层进行操作一样）

另一种方法：

如果您正在使用下划线的模板，这可能是一种方法。您可以使用

下划线的

函数根据团队对列表进行分组

var teams = [
  {
    "name": "Paul",
    "team": "pacers"
  },
  {
    "name": "Kirk",
    "team": "bulls"
  },
  {
    "firstname": "George",
    "team": "pacers"
  },
  {
    "name": "Taj",
    "team": "bulls"
  }
];
var groupedList = _.groupBy(list, function(l){
    return l.team;
});
console.log(JSON.stringify(groupedList));

这就是它的分组方式

{
    "pacers": [
        {
            "name": "Paul",
            "team": "pacers"
        },
        {
            "firstname": "George",
            "team": "pacers"
        }
    ],
    "bulls": [
        {
            "name": "Kirk",
            "team": "bulls"
        },
        {
            "name": "Taj",
            "team": "bulls"
        }
    ]
}

然后，您可以使用for-each循环和in-template并按以下方式生成

HTML

。

groupedList

作为

teams

传递给下面的模板

<%
   _.each(teams, function(team, teamName){
%>
   <div class="<%=teamName%>">
<%
   _.each(team, function(player){
%>
    <li><%=player.name%></li>
<%
   });
%>
    </div>
<%
   });
%>

这将按照您期望的方式生成

HTML

注意：

---

给出的代码片段考虑了

下划线

模板，您可能需要根据使用的内容进行更改。希望有帮助。

如果我错了，请纠正我。所描述的问题更多地涉及到控制与模型相关的每个项目的内容，以及如何简单地分组呈现它们

1） Niranjan已经介绍了如何将数据分组到单独的列表中，但请记住，返回的列表不是主干结构

2） 根据本手册，您可以通过集合使用“u.groupBy”方法，即：

myCollection.groupBy（等）

3）我会考虑将组的结果映射回模型中，并将每个模型传递到一个单独的视图中，并将它们从主列表视图中呈现出来。p>

var CollectionView = Backbone.View.extend({
    initialize : function () {
       // Note: I am pretending that you have a real collection.
       this.collection.fetch().then(
         this.addAll(true);
       );
    }

    addOne : function (model) {
      // call .render individual template items here for each model.
      var view = new ItemView(model);
      this.$el.append(view.render();
    },

    addAll : function (groupOpts) {
      var col = this.collection;

      if(groupOpts === true) { 
         // Do grouping (or do it in the model). Maybe put back into new collection?
      }         

      _.each(col, function(model) {
         this.addOne(model);
      }, this);
    },

    render : function () {
      // Render your template here.                    
    }
});

var ItemView = Backbone.View.extend({
   render : function () {

   }
});

---

这不是一个完整的例子，但这是我在尝试同样的事情时会遵循的一般模式。在我看来，每个项目都有一个单独的视图/模型可以让您更好地控制。

是的，我同意您将

groupBy

作为

collection.groupBy（）

来使用。但由于它是一个JSON数组，所以我更喜欢在本例中以这种方式使用它。是的，它应该按照你指出的方式使用。很酷，谢谢，我从来不知道这是一个可用的选项。我知道像这样的东西有一个更简单的解决方案，我会尝试一下，很快就会回来。谢谢这太令人困惑了，我想我需要放弃。