StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20233952
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
9
CommunityOwnedDate
CreationDate
2013-11-27T04:32:08.063
FavoriteCount
0
LastActivityDate
2013-11-27T21:05:01.470
LastEditDate
2013-11-27T21:05:01.470
LastEditorUserId
2088297
OwnerUserId
2088297
ParentId
20232662
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
EDIT Added the jsfiddle: <a href="http://jsfiddle.net/ythLm/" rel="nofollow">http://jsfiddle.net/ythLm/</a> Not sure if that's what you wanted to implement. I am assigning players to teams in this demo, which may or may not satisfy all your future requirements. (but we can always improve) :) ===ORIGINAL ANSWER=== I'm not sure I fully understand your requirements here...so you wanna display all the players in one view? and show their team names and sides? what's the order for the players list? but: to assign players to teams, you can just simply pass them as an attribute on the team model. Oh yea, I think You need a team model: <pre><code>App.Models.Team = Backbone.Model.extend({ //team stuff }); App.Collections.Teams = ... //usually you want a collection too </code></pre> and then <pre><code>var blueTeam = new App.Models.Team({ name: 'blue team', players: new App.Collection.Players([ {"name": "Mike", "points": 10 }, { "name": "Joe", "points": 13 }, { "name": "Kobe", "points": 23 } ]); }); </code></pre> Home team and away team, or just currently selected team, can just be an attribute on the team model. When you want to change them, you can just change the attribute on the team model. eg. <pre><code>var blueTeam = new App.Models.Team({ //other attributes and players selected: true, side: 'home' }); </code></pre> You can attach those status to collections as well, but I don't recommend doing that. (let's think if this is a real world application, Team has_many :players, and Player belongs_to :team) but you want to have all the players in one list (if i understand your requirements correctly), so we need to assign Team to each Player, instead of assigning players to a Team: <pre><code>var mike = new App.Models.Player({ name: 'mike', team: new App.Models.Team({ name: 'blue' }); }); </code></pre> but there's a problem with this: there are 20 players, but only 4 teams, you will have each team repeated 5 times, and they are all different objects. eg. if you do <pre><code>mike.get('team').set('selected', true); </code></pre> only mike's 'team' will be selected, other blue team players' "team" will not be updated. to solve this. First, get all the players altogether. remember, they need to a foreign key, or any kind of reference to the team they belong to: (it could be team_id, or just team_name) <pre><code>var players = App.Collections.PlayersList([ {"name": "Mike", "points": 10, team_id: 1}, {"name": "Joe", "points": 13, team_id: 2}, {"name": "Kobe", "points": 23, team_id: 1} //... all your players ]); </code></pre> and then, your teams, but you don't have to assign players : <pre><code>var teams = new App.Collections.Teams([ {"id": 1, name: "blue team", selected: false, side: ''}, {"id": 2, name: "red team", selected: false, side: ''} //... all your teams ]); </code></pre> now, somewhere in your app assign teams to your players: <pre><code>players.each(function(player){ player.set("team", teams.get(player.get("team_id"))); }); </code></pre> doing it this way, makes sure all the players on the same team will have the same team model. (Example <a href="http://jsfiddle.net/sbjaz/10/" rel="nofollow">http://jsfiddle.net/sbjaz/10/</a> when the code is paused by debugger, open your console, and try to play with player_1, player_2, and player_3, 1 and 2 are on the same team, try change any attributes on the team model for player1/2 and check the other one's team model) (another Example <a href="http://jsfiddle.net/sbjaz/11/" rel="nofollow">http://jsfiddle.net/sbjaz/11/</a> do the same, you will notice when you update the team for player_1, player_2's team is not updated) finally, in your collection view: <pre><code>addOne: function(model) { var playerView; if(model.get("team").isHomeTeam()) { //isHomeTeam is a helper method in team model playerView = new App.Views.HomePlayer({ model: model }); } else { playerView = new App.Views.AwayPlayer({ model: model }); } this.$el.append( playerView.render().el ); } </code></pre> well, and you need to pass Teams collection to PlayerList view as well so you know if any of the team has changed: <pre><code>new playersView = new App.Views.Players({ collection: players, teams: teams }); </code></pre> track team changes, in your view definition: <pre><code>App.Views.Players = Backbone.View.extend({ initialize: function(options) { this.teams = options.teams; this.teams.on('change', this.render, this); //if any of the team changes, rerender everyting this.render(); } }); </code></pre> and, you may think, this is not efficient at all: each time you swtich Home/Away teams, all the players will have to be re-rendered. how do I refactor this? well first, I think you don't have to define two views for the player view -- they have too much repeated code! it's not DRY. let's define a view that works for any player (at least for now): <pre><code>App.Views.PlayerView = Backbone.View.extend({ tagName: "li", // events...mikeAlert they are all the same // you will see why we assign this.template in render instead of initialize //well or you don't have to assign this.template at all. render: function() { var templateSelector = this.model.isHomeTeam() ? "#home-template" : "#away-template"; this.template = _.template($(templateSelector).html()); return this.$el.html(this.template(this.model.toJSON());; } }); </code></pre> you get the idea, or may be you don't even have to write two templates if they have too much repeated code too! well you need to update addOne: <pre><code>//since PlayerView's render() returns html directly... addOne: function(model) { this.$el.append(new App.Views.PlayerView({model: model}).render()); } </code></pre> now events, you don't have to pass teams to your PlayersView or bind collection change events there anymore. in your PlayerView's initialize: <pre><code> initialize: function() { //rerender player view, when team is changed! this.model.on('change', this.render, this); } </code></pre> now, every time you change any team, only the relevant playerViews will be updated.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHome/away teams with a list of players inside a backbone.js app?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USYurui Ray Zhang
UserOwnerUserId
1. USYurui Ray Zhang
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POHome/away teams with a list of players inside a backbone.js app?
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.