javascript - Backbone 组由两个 View ？

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

我可以通过将上述内容设置为模板并仅呈现该单个模板来使用一个 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 附加到它的受尊敬的类。如果你们聪明的人看到任何问题，请告诉我，我很想学习!!

最佳答案

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

}

关于javascript - Backbone 组由两个 View ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20621966/