javascript - Backbone groupBy 两个 View ？

Question

我有两种观点，我正在尝试使用 groupBy 将球员分组到他们所在的球队，这显然在模型中定义。我只是对渲染一些标记感到困惑让我给你看一些代码

单个玩家的玩家 View :

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

一组玩家的玩家 View :

    //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 , 函数(播放器){

这样我就可以将玩家包裹在一个 div 中，如下所示。

_.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);

我可以通过将类似上面的内容设置为模板并仅呈现单个模板来使用一个 View 来完成此操作，但是由于我正在使用两个 View ，所以我不确定如何为团队添加标记？这有意义吗？

编辑: 刚想到，但我想我可以在模板中实例化 playerView(不确定是否可能会测试)然后渲染该模板，它仍然会包括单人游戏 View ，让我可以像往常一样与 playerView 中的每个模型进行交互。我对此不确定，但只是一个想法，让我们尽快回复。

编辑: 是的，上面的方法不起作用，出于显而易见的原因，您不能在下划线模板中使用 javascript，我想知道是否有下划线方法来解析模板中的内容作为 JavaScript IDK。还是希望能找到好的解决办法。

我的解决方案:首先感谢@fbynite 提供的解决方案，您敢于分享您的解决方案我很感激，但我认为这比我需要的要多一点，怎么办我知道？

我只是玩了一会儿，想出了这段代码，它运行良好，只在我现有的代码中增加了 2 到 3 行，所以我不必重新调整我的逻辑(我很容易混淆!)。下面的代码是对“一组玩家的玩家 View (只是渲染方法)”上面代码的改进，它位于我的 PlayersView 的渲染方法中。

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

这对我来说简单多了，更易于维护，关于这段代码的缺点是我不确定它是否稳定或将来可能会导致问题，但它目前运行良好!

如您所知，我只是创建了一个以团队名称作为类的 div 元素，然后将其附加到 View 的根元素。然后在设置之后，我遍历播放器并将 playerView 附加到它的受人尊敬的类。让我知道如果你聪明的人看到任何问题，我很乐意学习!

Answer 1

我想您可以创建一个 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;

}