javascript - 将具有相同属性的模型嵌套到 div 中的最简单方法？

Question

这比世界上任何事情都让我困惑。我只是想打印 html，将具有相同定义属性的所有模型分组/嵌套/组合到一个 div 中，然后继续我的生活。

<div>
    <div>I have an attribute of red so I am here</div>
    <div>I too have an attribute of red so I am here</div>
</div>
<div>
    <div>Well I have an attribute of blue so I am here</div>
    <div>I have an attribute of blue so I am here as well</div>
</div>

我不明白为什么简单地将相同的属性模型包装在 div 中会如此令人困惑。

像这样打印相同的 html 非常简单，无需对其进行包装，但尝试对其进行包装会变得一片困惑和大量代码。

<div>I have an attribute of red so I am here</div>
<div>I too have an attribute of red so I am here</div>
<div>Well I have an attribute of blue so I am here</div>
<div>I have an attribute of blue so I am here as well</div>

我显然使用的是backbone.js，输出一个列表是如此简单，但是当你想向其中添加更多内容时，就变得非常头疼了。

var Players = Backbone.Collection.extend({
    url: 'data/players.json',
    comparator : 'team'
});

var Player = Backbone.View.extend({
    el: '.app',
    render: function() {
        var self = this;
        var players = new Players();
        players.fetch({
            success: function(players) {
                console.log(players);
                var template = _.template($('#appTemplate').html(), {players: players.models});
                self.$el.html(template);
            }
        });
    }
});

var EditPlayer = Backbone.View.extend({
    el: '.app',
    render: function() {
        this.$el.html('Works, coffee? Football?');
    }
});

var Router = Backbone.Router.extend({
    routes: {
        '':'home',
        'new_player': 'editPlayer'
    }
 });

var player = new Player();
var editPlayer = new EditPlayer();
var router = new Router();

router.on('route:home', function() {
    player.render();
});
router.on('route:editPlayer', function() {
    editPlayer.render();
});

Backbone.history.start();

好吧，让我在模板中使用它

<script id="appTemplate" type="text/template">
<a href="#/new_player" class="btn btn-primary">Add Player</a>
<table class="table table-bordered">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody>

    <% _.each(players, function(player) { %>    
      <tr class="<%= player.get('team') %>">
        <td><%= player.get('firstname') %></td>
        <td><%= player.get('lastname') %></td>
        <td><%= player.get('team') %></td>
      </tr>
    <% }); %>
    </tbody>
</table> 
</script>

好吧，我使用按团队组织的比较器得到了一个不错的列表，但是如何嵌套每个团队呢？我真的需要编写令人困惑的 constructor 方法、parse 方法，还是可以重写我的 json 数组并从那里开始？

我真的很迷茫，希望有人能清楚地解释一下。我不知道你们为什么首先发帖，你们通常会付出惊人的努力，我不确定是否是为了分数，只是为了提供帮助还是什么，但我正在努力成为一名更好的程序员，确实需要克服这个障碍。

我只是想补充一点，我从基础教程中学到了backbone.js，所以这就是为什么我对这些高级主题感到厌烦，显然我需要学习一些更高级的书籍/教程/类(class)，但现在我只想弄清楚这一点!

Answer 1

本质上，您要做的就是首先对数据进行分组，您可以使用下划线的 groupby 之类的东西来完成此操作函数，然后迭代组。虽然您可以在模板中完成所有操作，但首先准备数据并将其发送到模板可能会更容易、更简洁。

例如

 success: function(players) {
       var groupedPlayers = _.groupBy(players.models, function (player) {
             return player.get('team');
       });
       var template = _.template($('#appTemplate').html()
                       , {groupedPlayers: groupedPlayers});
        self.$el.html(template);
     }

使用以下模板

<% _.each(groupedPlayers, function(team, i) {   %>   
       <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Team</>

            </tr>
        </thead>
        <tbody>
      <% _.each(team, function(player) { %>    
      <tr class="<%= player.get('team') %>">
        <td><%= player.get('firstname') %></td>
        <td><%= player.get('lastname') %></td>
        <td><%= player.get('team') %></td>
      </tr>
    <% }); %>
       </tbody>
    </table> 
<% }); %>

jsfiddle