如何在集合中添加集合

How to add a collection inside collection?

本文关键字：集合 添加      更新时间：2023-12-14

问题：我使用的是backbone.js。我有一个用于一个玩家的player视图，该视图的根元素是<li></li>列表项节点。

然后我有一个players视图，它显示了集合中的所有玩家，该视图的根元素是<ul></ul>。（很简单的东西！）

这样做的结果是。

<ul> //The players collection root for the players collection view
    <li>Kobe Bryant is on the lakers</li> // The player model root element for the player model view
    <li>LeBron James is on the heat</li> // The player model root element for the player model view
</ul>

我的模型的属性由name, team组成。

[
    {name: 'Kobe Bryant', team: 'lakers'},
    {name: 'LeBron James', team: 'heat'}
]

我如何循环（或做任何最好的事情），使我的视图结果是这样的。

<ul class="lakers"> 
    <li>Kobe Bryant is on the lakers</li>
</ul>
<ul class="heat"> 
    <li>LeBron James is on the heat</li>
</ul>

甚至更好我不需要创建团队集合视图。然后写一些代码来匹配每个球员和他的球队？结果是这样的。

<div class="lakers">// Teams collection root element
    <ul>// Players collection root element 
        <li>Kobe Bryant is on the lakers</li>// Player model root elemnt
    </ul>
</div>
<div class="heat">// Teams collection root element
    <ul>// Players collection root element 
        <li>LeBron James is on the heat</li>// Player model root elemnt
    </ul>
</div>

我试过这样做，但我认为我实例化每个视图的方式是错误的，或者我只是做错了什么，所以如果把一个球员集合放在一个团队集合中是个好主意，我如何得到上面这样的结果，在那里我可以有一个父元素，即团队，然后在里面有该团队的球员列表？

我的想法&代码：我想在players视图中，我可以写一些东西来按团队组织每个模型，比如。

_.each(this.collection.where({team: "lakers"}), function(model) {
       var playerView = new PlayerView({ model: model});
       this.$el.append(playerView.render().el);
       this.$el.addClass('lakers');
}, this);

这里面有明显的问题，因为，我们写所有这些只是为了向根中添加一个类，如果我们再次这样做，它会一直添加到根<ul class="lakers miami">，这没有帮助。

我的想法太少了，我明白了，我想对每个球员进行分类，但我不太清楚。我倾向于团队球员集合，我只是不知道如何匹配this.team.get('name') == this.player.get('name')//与此相关的东西。我不确定这是否真的有意义，我承认我需要帮助，哈哈。大家感恩节快乐，我怀疑今天有人在stackoverflow。

hm。。。你真的不需要匹配球员和球队。

让我们从后端（数据）的角度来思考：

你有一个球员模型和一个团队模型一个球员属于一个团队，一个团队有很多球员。为了找到球员属于哪支球队，我们所要做的就是在球员模型中添加一个外键：team_id

team_id，是团队的id。通常您不想使用名称，因为：1。它可能会被更改，当你更改球队名称时，你不想更新所有球员。2，效率不高。（字符串字段vs整数字段）ID总是唯一的，您永远不应该更改它们。

假设你有科比和湖人

//here's Kobe
var kobe = {
  id: 24,  //yea, all models should have their own primary key - id
  name: 'Kobe',
  team_id: 3
}
//this is Lakers in the database
var lakers = {
  id: 3,  //id for lakers,
  name: 'Lakers'
}

现在，你如何找到科比所属球队的名字？

比方说，你有一个团队集合（所有团队）

var teams = new Teams([ ..all the teams! .. ]);
//to find the name of the team
teams.get(kobe.get('team_id')).get('name');  // you find the model first, then read its name.

你可以将玩家打包到团队中，或者将团队分配给玩家，但你不必这样做。这实际上取决于你的应用程序的主要用途。（或查看）在一些大型应用程序中，你可能会发现人们将团队封装到玩家实例中的地方，以及其他将玩家封装在团队下的地方；

就你而言，你似乎还没有决定如何处理你的观点。并且，将两个集合传递到一个视图中并没有错（但当你必须这样做时，通常意味着你需要重新思考如何组织你的页面）

PlayersView = Backbone.View.extend({
  initialize: function(options) {
    //in case teams/players is not passed to the view, we just set them to empty collections
    this.teams = options.teams || new Teams([]);
    this.players = options.players || new Players([]);
  }
});

实例化视图时，传递两个集合：

var playersView = new PlayersView({
  players: players,
  teams: teams
});

在你的模板中，如果你只是列出所有玩家：

<% _.each(players, function(player) {
   <% var team = teams.get(player.get('team_id'))%>
   <%= player.get('name') %> belongs to <%= team.get('name') %>
}) { %>

或者，如果您正在列出球队及其球员：//在这种情况下，您确实应该创建子视图，而不是在一个模板中完成所有操作

<% _.each(teams, function(team) {
   <ul class="<%= team.get('name')%>">
     <% var teamPlayers = players.where({team_id: team.get('id')}) %>
         <% _.each(teamPlayers, function(player) {
           <li>
             <%= player.get('name') %> belongs to <%= team.get('name') %>
           </li>
         <% }) %>
   </ul>
}) { %>

=====================

编辑：

在您的代码中

_每个（this.collection.where（{team:"湖人"}），函数（模型）{var playerView=新的playerView（｛model:model｝）；这个$el.append（playerView.render（）.el）；这个$el.addClass（'makers'）；}，这）；

您正在_.each（）中重复addClass，这是不必要的。既然你已经决定要找到湖人队的球员，你应该在模板中进行，或者只将其分配为根元素的className，假设每支球队都在一个视图中：

 //this is a view for a Team, it's model should be Team
 TeamView = Backbone.View.extend({
   className: function() {
     return this.model.get('name');
   }
 });
相关文章：