Javascript 集合视图是否位于另一个集合视图中？

使用backbone.js，我设置了一个

appView

，可以很好地呈现内部的两个视图（

teamView

和

playerView

），应用程序视图可以访问两个集合

团队

和

玩家

，并将这两个集合呈现为这样

this.teams.each(function(team) {
    var teamView = new TeamView({ model: team }); // New instance of the team view
    var teamHtml = teamView.render().el; //So I set the html as a list of teams
    this.$el.append(teamHtml); // Append it

    var teamPlayers = this.players.where({team_id: team.get('id')}) // Organize so that players matches his team id.
    console.log(teamPlayers)

    _.each(teamPlayers, function(player) { // Run a list of the associated players to team
        var playerView = new PlayerView({ model: player }); // New instance of the player view

        var playerHtml = playerView.render().el; //set the html as a list of players
        this.$el.append(playerHtml); //append it
        console.log(player.toJSON());
    }, this);

}, this);

<ul>// The root of the app view
    <div>// The root of the team view
        <strong>Lakers</strong>
    </div>
    <li>Kobe Bryant</li>// The root of the player view
    <li>Pau Gasol</li>// The root of the player view
    <div>// The root of the team view
        <strong>Heat</strong>
    </div>
    <li>LeBron James</li>// The root of the player view
    <li>Dwayne Wade</li>// The root of the player view
</ul>

<ul>// The root of the app view
    <div>// The root of the team view
        <strong>Lakers</strong>// This isn't important just need it inside the view
        <li>Kobe Bryant</li>// The root of the player view
        <li>Pau Gasol</li>// The root of the player view
    </div>
    // You see the difference, the player view is now inside the team view and both are inside the app view.
    <div>// The root of the team view
        <strong>Heat</strong>// Again this isn't important just need it inside the view
        <li>LeBron James</li>// The root of the player view
        <li>Dwayne Wade</li>// The root of the player view
    </div>
</ul>

这是显而易见的，但结果是这样的

this.teams.each(function(team) {
    var teamView = new TeamView({ model: team }); // New instance of the team view
    var teamHtml = teamView.render().el; //So I set the html as a list of teams
    this.$el.append(teamHtml); // Append it

    var teamPlayers = this.players.where({team_id: team.get('id')}) // Organize so that players matches his team id.
    console.log(teamPlayers)

    _.each(teamPlayers, function(player) { // Run a list of the associated players to team
        var playerView = new PlayerView({ model: player }); // New instance of the player view

        var playerHtml = playerView.render().el; //set the html as a list of players
        this.$el.append(playerHtml); //append it
        console.log(player.toJSON());
    }, this);

}, this);

<ul>// The root of the app view
    <div>// The root of the team view
        <strong>Lakers</strong>
    </div>
    <li>Kobe Bryant</li>// The root of the player view
    <li>Pau Gasol</li>// The root of the player view
    <div>// The root of the team view
        <strong>Heat</strong>
    </div>
    <li>LeBron James</li>// The root of the player view
    <li>Dwayne Wade</li>// The root of the player view
</ul>

<ul>// The root of the app view
    <div>// The root of the team view
        <strong>Lakers</strong>// This isn't important just need it inside the view
        <li>Kobe Bryant</li>// The root of the player view
        <li>Pau Gasol</li>// The root of the player view
    </div>
    // You see the difference, the player view is now inside the team view and both are inside the app view.
    <div>// The root of the team view
        <strong>Heat</strong>// Again this isn't important just need it inside the view
        <li>LeBron James</li>// The root of the player view
        <li>Dwayne Wade</li>// The root of the player view
    </div>
</ul>

我觉得这是一个很简单的问题，但我通过stackoverflow学习得最好。希望你们知道我在这里的意思，HTML结果解释了这一切：）

谢谢

完整代码：以防万一

/**播放器型号**/
var Player=Backbone.Model.extend({
默认值：{
名字：“科比·布莱恩特”，
球队：“洛杉矶湖人队”，
电话：24，
位置：'守卫'，
头发：对
}
});
/**团队模式**/
var Team=Backbone.Model.extend({
默认值：{
id:1，
姓名：“某个团队”
}
});
/**播放器集合**/
var PlayersCollection=Backbone.Collection.extend({
型号：播放器，
});
/**团队集合**/
var teamscolection=Backbone.Collection.extend({
模型：团队，
});
/**应用程序集合视图**/
var AppView=Backbone.View.extend({
标记名：“ul”，
模板：35;.template（$（'#allTemplate'）.html（）），
初始化：函数（选项）{
this.teams=options.teams | |新团队（[]）；
this.players=options.players | |新玩家（[]）；
},
render:function（）{
var self=这个；
这个。团队。每个（功能（团队）{
var teamView=newteamview（{model:team}）；
var teamHtml=teamView.render（）.el；
此.$el.append（teamHtml）；
var teamPlayers=this.players.where（{team\u id:team.get（'id'）}）
控制台日志（团队成员）
_.每个（团队成员、职能（球员）{
var playerView=新的playerView（{model:player}）；
var playerHtml=playerView.render（）.el；
本.$el.append（playerHtml）；
log（player.toJSON（））；
}，这个）；
}，这个）；
归还这个；
}
});
/**
播放器视图
**/
var PlayerView=Backbone.View.extend({
标记名：“li”，
模板：_.template（$（'#playerTemplate'）.html（），
活动：{
“单击按钮”：“警报”
},
初始化：函数（）{
//console.log（this.model.set（'name'，'Lance'）；
},
渲染：函数（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
},
警报：函数（）{
警报（'DONE！'+this.model.get（'name'））
}
});
/**团队视图**/
var TeamView=Backbone.View.extend({
标记名：“div”，
模板：35;.template（$（'#teamTemplate'）.html（）），
渲染：函数（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
}
});
var playersCollection=新playersCollection([
{
名字：“科比·布莱恩特”，
球队：“洛杉矶湖人队”，
小组编号：1，
电话：24
},
{
名称：“勒布朗·詹姆斯”，
球队：“迈阿密热火队”，
小组编号：2，
电话：6
},
{
姓名：“德韦恩·韦德”，
球队：“迈阿密热火队”，
小组编号：2，
电话：3
},
{
姓名：“迈克尔·比斯利”，
球队：“迈阿密热火队”，
小组编号：2，
电话：3
},
{
名字：“罗恩·阿泰斯特”，
球队：“纽约尼克斯队”，
小组编号：3，
电话：15
},
{
姓名：“卡尔·马龙”，
球队：“洛杉矶湖人队”，
小组编号：1，
电话：33
},
{
名字：“达米安·利拉德”，
团队：“波特兰开拓者”，
小组编号：4，
电话：3
},
{
名称：“Westly Matthews”，
团队：“波特兰开拓者”，
小组编号：4，
电话：55
},
{
名称：“威尔特·钱伯林”，
球队：“洛杉矶湖人队”，
小组编号：1，
电话：17
}
]);
var teamscolection=新teamscolection([
{
id:1，
名字：“湖人队”
},
{
id:2，
名称：“热”
},
{
id:3，
名字：“尼克斯”
},
{
id:4，
名称：“开拓者”
}
]);
//快跑！！
var-appView=new-appView（{players:playersCollection，teams:teamscolection}）；
$（document.body）.append（appView.render（）.el）；

您似乎在做的是添加

团队HTML

然后添加

玩家HTML

然后再次添加

团队HTML

和

玩家HTML

等等。您应该将

Players HTML

添加到

Team HTML

，然后将

Team HTML

添加到您的

el

。如果这样做有效，请尝试：

    this.teams.each(function(team) {
        var teamView = new TeamView({ model: team });
        var teamHtml = teamView.render().el;

        var teamPlayers = this.players.where({team_id: team.get('id')})
        console.log(teamPlayers)

        _.each(teamPlayers, function(player) {
            var playerView = new PlayerView({ model: player });

            var playerHtml = playerView.render().el;
            // Add player HTML to Team HTML
            $(teamHtml).find('div').append(playerHtml);
            console.log(player.toJSON());
        }, this);
       // Add Team HTML to el
        this.$el.append(teamHtml);

    }, this);

---

这与您正在做的只是一个w.r.t，但您应该考虑以更好的方式构建您的观点。

我的问题一切都清楚了吗？好的，您能提供一些关于构建更好结构的提示吗？在我看来，最好是在团队视图中循环所有玩家，然后在应用程序视图中循环所有团队。但我在尝试时遇到了一些障碍。好吧，我让它起作用了，起初它不起作用，但当我拿走

.find（'div'）

时，它起作用了。我不知道它为什么会出现在那里，直到

teamHTML

被追加，dom才有div，至少我认为是这样，但是没有div它就可以正常工作。我在“玩家”视图中的每个玩家上运行事件都没有问题，这个结构有问题的原因吗？您可以考虑将

PlayerView

作为

TeamView

的子视图。您能给我一个不应该遵循此模式的原因吗？如果合理的话，我会自己解决，给你一张绿色支票。这也可以。但如果你从逻辑上认为球队是由球员组成的。因此，将

PlayerView

作为

TeamView

的子视图，然后在调用

TeamView

的

render

后，它应该呈现自身，然后呈现其所有子视图（