Javascript 由两个视图组成的主干组？

我有两个视图，我试图使用

groupBy

将玩家分组到他们所在的团队中，这显然是在模型中定义的。我只是对呈现一些标记感到困惑，让我向您展示一些代码

单个玩家的玩家视图：

    //Player view for a single player (just the render method)
    render: function() {
        this.$el.html( this.template(this.model.toJSON()) );
        return this;
    }

    //Players view for a collection of players (just the render method)
    render: function() {
        var groupedPlayers = _.groupBy(playersCollection.models, function(player) { return player.get('team') });

        _.each(groupedPlayers, function(team, i) {
            _.each(team, function(player) {
                var playerView = new PlayerView({model: player});
                this.$el.append(playerView.render().el);
            }, this);
        }, this);

        return this;

    },

玩家集合的玩家视图：

    //Player view for a single player (just the render method)
    render: function() {
        this.$el.html( this.template(this.model.toJSON()) );
        return this;
    }

    //Players view for a collection of players (just the render method)
    render: function() {
        var groupedPlayers = _.groupBy(playersCollection.models, function(player) { return player.get('team') });

        _.each(groupedPlayers, function(team, i) {
            _.each(team, function(player) {
                var playerView = new PlayerView({model: player});
                this.$el.append(playerView.render().el);
            }, this);
        }, this);

        return this;

    },

好的，我想这是我唯一需要展示的代码，来演示我想弄明白的东西

您可以看到我输出的全部内容是

playerView

el在集合中循环。这很好，但是我需要在循环团队

.each（groupedPlayers，function（team，I）{

之后和循环参与者

.each（team，function（player）{

这样我就可以把球员们围成一个像下面这样的人

_.each(groupedPlayers, function(team, i) {
    <div class="<%= i %>">//Set this div here obviously 
                          //can't inside a render method.
                          //need to create a template for.
                          //this view or something.
        _.each(team, function(player) {
        var playerView = new PlayerView({model: player});
        this.$el.append(playerView.render().el);
        }, this);

    </div> // Close the sample div
           // wrapping my players collection.

}, this);

这对我来说太容易了，它更易于维护，关于这段代码的缺点是我不确定它是否稳定，或者将来是否会导致问题，但是现在它工作得很好

---

正如您所知，我只是创建了一个以团队名称为类的div元素，然后将其附加到视图的根元素。设置好之后，我循环遍历玩家并将

playerView

附加到其受尊重的类中。如果您聪明的人发现了任何问题，请告诉我，我很乐意学习！！

我想您可以创建一个

documentFragment

，以实现所需的结果，例如：

render: function() {
  // Make the documentFragment a jQuery object for consistency.
  var $df = $(document.createDocumentFragment()),
      groupedPlayers = playersCollection.groupBy('team');

  _.each(groupedPlayers, function(team, i) {
    var $div = $('<div>',{'class':i});
    $df.append($div);
    _.each(team, function(player) {
      var playerView = new PlayerView({model: player});
      $div.append(playerView.render().el);
    });
  });

 // populate the view's element with the documentFragment.
 this.$el.html($df);

 return this;

}

render:function（）{
//为了保持一致性，将documentFragment设置为jQuery对象。
var$df=$（document.createDocumentFragment（）），
groupedPlayers=playersCollection.groupBy（'team'）；
_.每个（分组球员、职能（团队、一）{
var$div=$（''，{'class'：i}）；
$df.append（$div）；
_.每个（团队、职能部门（球员）{
var playerView=新的playerView（{model:player}）；
$div.append（playerView.render（）.el）；
});
});
//用documentFragment填充视图的元素。
这个.$el.html（$df）；
归还这个；
}

如果需要的话可以提问，我可能遗漏了一些关键信息。我只是希望你能了解我的意思的大致要点。我可以根据你的问题要求进行具体说明。仅供参考-像

.2

这样的CSS类无效-你可能需要前缀，例如

team-2

。此外，在上面的代码中，没有必要查找e> 此.el.find（'..+i）-您可以访问闭包中的

teams

变量，因此只需使用

teams.append（playerView.render（）.el）

。事实上，这将完全消除对基于

i

的类的需要。它不返回数字。

i

返回团队的名称。通常

i

是一个整数，但是我在这段代码上得到了帮助，而帮助者使用了那个参数，我可以更改它。您谈论的第二部分很有趣，好的，谢谢。我是我不确定我是否理解，因为我需要将玩家包装在

I

div中。哦，我看到你现在将

团队

放在正确的位置进行调整。啊，对。这是有意义的，尽管我仍然会注意无效的类（例如，如果团队名称有空格或非单词字符）。不过，正如前面提到的，我认为您根本不需要特殊的类-只需参考

teams

变量即可。很酷，看起来是一个可能的解决方案，不会将其计算在内。感谢您的分享，我将把它再打开一点，希望得到一个更好的解决方案。也许这是一个非常好的解决方案。我知道什么。Intuit从主干模式来看，这感觉有点不自然。@MichaelJosephAubry，我同意，它确实感觉不自然。我还添加了另一种方法。感谢您花时间，从我看到的情况来看，它看起来不错。我很快会回来让您知道它是如何工作的。我打赌它工作得很好。我非常感谢您的回答，但我认为它可能不止一个我需要，我写了一些有用的东西，查看原始帖子，如果你看到任何可能的问题，请随意评论。这与我上面的工作非常类似，但当我填充我的本地存储时，它会将播放器视图渲染两倍，使用这两种方法..嗯，我需要弄清楚，但谢谢你。