Использование Backbone.js Я установки appView, что хорошо делает два вида внутри (teamView и playerView), вид приложение имеет доступ к обеим коллекциям teams и players и делает обе коллекции, как это ,Коллекция в другой коллекции?
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>
Таким образом, вы можете видеть, что, когда я бегу _.each команду я поставил его в петлю вид команды, то под этим я поставил его в цикле игроки зрения, это понятно, почему этот результат выглядит так.
Где я смущен, как настроить просмотр игроков внутри представления команды. Конечно, я пытался зацикливание игроков внутри самой точки зрения команды, но без зацикливания команд у меня есть трудное время работает var teamPlayers = this.players.where({team_id: team.get('id')}) // Organize so that players matches his team id.
Думая об этом внутри вида я мог бы иметь доступ к this.model.get('id') в замене из team.get('id') и использовать вместо , но каждый раз, когда я придумываю идею, это терпит неудачу, потому что мне не хватает мельчайших деталей, и я в конечном итоге теряю время. Поэтому я полагаю, что могу прояснить это, получить некоторое обучение и дать некоторые моменты.
Так что, наконец, я хочу получить такой результат HTML.
<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-результат объясняет все это :)
Спасибо!
ПОЛНЫЙ КОД:Только в случае
/** PLAYER MODEL **/
var Player = Backbone.Model.extend({
defaults: {
name: "Kobe Bryant",
team: "Los Angeles Lakers",
number: 24,
position: 'guard',
hair: true
}
});
/** TEAM MODEL **/
var Team = Backbone.Model.extend({
defaults: {
id: 1,
name: 'SomeTeam'
}
});
/** PLAYER COLLECTION **/
var PlayersCollection = Backbone.Collection.extend({
model: Player,
});
/** TEAM COLLECTION **/
var TeamsCollection = Backbone.Collection.extend({
model: Team,
});
/** APP COLLECTION VIEW **/
var AppView = Backbone.View.extend({
tagName: 'ul',
template: _.template($('#allTemplate').html()),
initialize: function(options) {
this.teams = options.teams || new Teams([]);
this.players = options.players || new Players([]);
},
render: function() {
var self = this;
this.teams.each(function(team) {
var teamView = new TeamView({ model: team });
var teamHtml = teamView.render().el;
this.$el.append(teamHtml);
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;
this.$el.append(playerHtml);
console.log(player.toJSON());
}, this);
}, this);
return this;
}
});
/** <li> Player View </li> **/
var PlayerView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#playerTemplate').html()),
events: {
'click button':'alert'
},
initialize: function() {
//console.log(this.model.set('name', 'Lance'));
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
alert: function() {
alert('DONE! ' + this.model.get('name'))
}
});
/** <div> Team View </div> **/
var TeamView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#teamTemplate').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var playersCollection = new PlayersCollection([
{
name: 'Kobe Bryant',
team: 'Los Angeles Lakers',
team_id: 1,
number: 24
},
{
name: 'Lebron James',
team: 'Miami Heat',
team_id: 2,
number: 6
},
{
name: 'Dwayne Wade',
team: 'Miami Heat',
team_id: 2,
number: 3
},
{
name: 'Michael Beasley',
team: 'Miami Heat',
team_id: 2,
number: 3
},
{
name: 'Ron Artest',
team: 'New York Knicks',
team_id: 3,
number: 15
},
{
name: 'Karl Malone',
team: 'Los Angeles Lakers',
team_id: 1,
number: 33
},
{
name: 'Damion Lillard',
team: 'Portland Trailblazers',
team_id: 4,
number: 3
},
{
name: 'Westly Matthews',
team: 'Portland Trailblazers',
team_id: 4,
number: 55
},
{
name: 'Wilt Chamberlin',
team: 'Los Angeles Lakers',
team_id: 1,
number: 17
}
]);
var teamsCollection = new TeamsCollection([
{
id: 1,
name: 'Lakers'
},
{
id: 2,
name: 'Heat'
},
{
id: 3,
name: 'Knicks'
},
{
id: 4,
name: 'Trailblazers'
}
]);
// RUN!!
var appView = new AppView({ players: playersCollection, teams: teamsCollection });
$(document.body).append(appView.render().el);
С моим вопросом все ясно? –