Question

我有两个观点，我试图使用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;

    },

好的，我认为这是我需要展示的唯一代码，以展示我想要弄清楚的内容。

你可以看到我输出的所有内容都是循环通过集合的playerView el。这很好，但我需要在循环团队_.each(groupedPlayers, function(team, i) {之后和循环播放器之前添加标记_.each(team, function(player) {

这样我就可以将玩家包裹在下面的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);

我可以通过将上面的内容设置为模板并仅渲染该单个模板，在一个视图中执行此操作，但由于我正在使用两个视图，因此我不确定如何为团队添加标记？这有意义吗？

编辑：刚想到，但我想我可以在模板中实例化playerView（不确定是否可以测试）然后渲染那个仍然包含单个模板的模板播放器视图允许我像playerView中的每个模型一样正常交互。我不确定这一点，但只是一个想法，让我们尽快看到不好的帖子。

编辑：是的，以上不起作用，你不能在下划线模板中使用javascript，原因很明显，我想知道是否有一个下划线方法来解析模板内的东西作为JavaScript IDK。仍然希望找到一个好的解决方案。

我的解决方案：首先感谢@fbynite为您提供解决方案，您大胆地分享您的解决方案我很欣赏，但这比我想象的还要多，我想我知道？

我只是玩了一下并提出了这段代码，它运行良好，只为我现有的代码添加了2到3个额外的行，所以我不必重新调整逻辑（我很容易混淆！）。下面的代码是对“玩家集合的玩家视图（只是渲染方法）”上面的代码的改进，这是我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元素，然后将其附加到视图的根元素。然后在设置之后，我遍历玩家并将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;

}

骨干组有两种观点吗？

1 个答案: