Javascript 在backbone.js应用程序中有球员列表的主客场球队？
A.我的级别：简介我刚刚完成了《杰弗里之路》中的主干.js课程。我已经掌握了诀窍，但是我该如何构建一个拥有4个团队（橙色、蓝色、绿色、黄色）然后每个团队拥有5-8名玩家的应用程序呢Javascript 在backbone.js应用程序中有球员列表的主客场球队？,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,A.我的级别：简介我刚刚完成了《杰弗里之路》中的主干.js课程。我已经掌握了诀窍，但是我该如何构建一个拥有4个团队（橙色、蓝色、绿色、黄色）然后每个团队拥有5-8名玩家的应用程序呢 B.描述代码：下面是代码。我有一个App.Models.Player模型，一个App.Views.HomePlayer和App.Views.AwayPlayer视图，然后有一个App.Collections.PlayersList集合，然后是集合
B.描述代码：下面是代码。我有一个
App.Models.PlayerApp.Views.HomePlayerApp.Views.AwayPlayerApp.Collections.PlayersListC.要求：这里没什么特别的，我需要一份4支球队的名单，然后每支球队5-8名球员（总共约20-25名球员，然后需要将他们与特定球队联系起来），我需要确定当前选择的球队是主队还是客队。主队和客队是可以互换的，我想在双方都有一个相同球队的名单并隐藏它们，然后显示当前正在比赛的球队，我只是不确定是否有比这更好的方法 最后一句话：是的，我正在使用
窗口<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>You have arrived.</h1>
<div class="app">
<button type="button"class="add">ADD</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min.js"></script>
<!-- Templates -->
<script type="text/template" id="home-template">
<div style="float: left; width: 47%;">Name: <%= name %> - Points: <%= points %><button class="btn"></button></div>
</script>
<!-- Templates -->
<script type="text/template" id="away-template">
<div style="float: right; width: 47%;">Name: <%= name %> - Points: <%= points %><button class="btn"></button></div>
</script>
<script>
$(function(){
//Name spacing
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
/*** OUR MODEL OF A PLAYER... PLAYER MODEL then SINGLE PLAYER VIEW ***/
// Player Model
// ----------
// Our **Player** model has `name`, `points`, and `rebounds` attributes.
window.App.Models.Player = Backbone.Model.extend({
// Default attributes for the player item.
defaults: {
name: "Michael",
points: 10,
rebounds: 9
}
});
// Single player view
// ---------------
// This is a view of how a player should look.
window.App.Views.HomePlayer = Backbone.View.extend({
//el is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#home-template').html()),
events: {
'click .btn': 'mikeAlert'
},
mikeAlert: function() {
alert('get food');
},
// Re-render the titles of the todo item.
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});
// Single player view
// ---------------
// This is a view of how a player should look.
window.App.Views.AwayPlayer = Backbone.View.extend({
//el is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#away-template').html()),
events: {
'click .btn': 'mikeAlert'
},
mikeAlert: function() {
alert('get food');
},
// Re-render the titles of the todo item.
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});
/*** END PLAYER MODEL SETUP ***/
/*** OUR PLAYERS COLLECTION... PLAYERS COLLECTION then PLAYERS COLLECTION VIEW ***/
// Players Collection
// ---------------
// We connect the players collection to the player model
// The collection of players is backed by *localStorage* instead of a remote
// server.
window.App.Collections.PlayersList = Backbone.Collection.extend({
// Reference to this collection's model.
model: App.Models.Player
// Save all of the player items under the `"players-backbone"` namespace.
//localStorage: new Backbone.LocalStorage("players-backbone"),
});
// Players Collection View
// ---------------
// Display a list of all player*s* here.
window.App.Views.Players = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: $(".app"),
initialize: function() {
this.render();
},
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(model) {
//Create a new child view
var homeplayer = new App.Views.HomePlayer({ model: model });
var awayplayer = new App.Views.AwayPlayer({ model: model });
//Then append it to the root, this
this.$el.append( homeplayer.render().el );
this.$el.append( awayplayer.render().el );
}
});
/*** END PLAYER*S* COLLECTION SETUP ***/
// Dummy Collection, new instance of *App.Collections.PlayersList*
// ---------------
window.players = new App.Collections.PlayersList([
{
name: 'McGee',
points: '14'
},
{
name: 'Joe E',
points: '21'
},
{
name: 'Mike',
points: '8'
}
]);
//Create new instaces to initialize each view
// New *App.Views.Player* instance, need to instantiate to set the model in the view.
// ------------
window.playersView = new App.Views.Players({ collection: players });
});
</script>
</body>
</html>
window.players = new App.Collections.PlayersList(
[
{
team: 'Green',
name: 'McGee',
points: '14'
},
{
team: 'Green',
name: 'Joe E',
points: '21'
},
{
team: 'Green',
name: 'Mike',
points: '8'
},
{
team: 'Blue',
name: 'Eli',
points: '14'
},
{
team: 'Blue',
name: 'Michael',
points: '21'
},
{
team: 'Blue',
name: 'Tim',
points: '8'
}
]
);
App.Models.Team = Backbone.Model.extend({
//team stuff
});
App.Collections.Teams = ... //usually you want a collection too
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 }
]);
});
var blueTeam = new App.Models.Team({
//other attributes and players
selected: true,
side: 'home'
});
var mike = new App.Models.Player({
name: 'mike',
team: new App.Models.Team({
name: 'blue'
});
});
mike.get('team').set('selected', true);
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
]);
players.each(function(player){
player.set("team", teams.get(player.get("team_id")));
});
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 );
}
new playersView = new App.Views.Players({
collection: players,
teams: teams
});
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();
}
});
//since PlayerView's render() returns html directly...
addOne: function(model) {
this.$el.append(new App.Views.PlayerView({model: model}).render());
}
initialize: function() {
//rerender player view, when team is changed!
this.model.on('change', this.render, this);
}
现在，每次您更换任何团队时，都只会更新相关的PlayerView。我是不是说错了这个问题？我有什么需要强调的吗？哇，这看起来棒极了，非常感谢你的时间和努力！你无法想象我有多感激它。。。这可能需要一段时间，我是一个缓慢的学习者…我只是看到了你的模板（在我写答案时没有看到），是的，你甚至不需要定义两个不同的模板。我认为这是一个有趣的问题。如果我的电池没有用完，我可能会在以后发布一个工作的JSFIDLE。（或者它将是tmr）谢谢，所以这很有意义
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());;
}
});
//since PlayerView's render() returns html directly...
addOne: function(model) {
this.$el.append(new App.Views.PlayerView({model: model}).render());
}
initialize: function() {
//rerender player view, when team is changed!
this.model.on('change', this.render, this);
}