0
我正在製作一個籃球統計應用程序，有一個球員及其屬性的集合。結合兩個集合backbone.js
players = new App.Collections.PlayersList(
[
{
name: 'McGee',
points: '14'
},
{
name: 'Joe E',
points: '21'
},
{
name: 'Mike',
points: '8'
}
]
);
然後我有隊
teams = new App.Collections.TeamsList(
[
{
team: 'Green', //Accidentally used uppercase, will change that, just didnt want to confuse you because it's uppercase in the console.log picture below
},
{
team: 'Blue',
}
]
);
列表我跟着這個How to place a collection within a model in Backbone.js? 並添加到我的團隊模式。
App.Models.Team = Backbone.Model.extend({
// Default attributes for the player item.
initialize: function() {
// assuming Players a collection of players
console.log(this.set('players', new App.Collections.PlayersList));
}
});
在控制檯內部我看到兩個模型，但玩家是空的。
這不是一些大的複雜的問題，我只是一個菜鳥，而且不知道如何處理:)
我試圖得到這樣的結果。其實這可能很難將球員附加到一個球隊，我怎麼會說這些球員是在這個球隊？
<div class="green">
<li data-player="McGee">Name: McGee, Points: 14</li>
<li data-player="Joe">Name: Joe E, Points: 21</li>
<li data-player="Mike">Name: Mike, Points: 8</li>
</div>
// Havent created players for this yet, but you get it
<div class="blue">
<li class="">Name: McGee, Points: 14</li>
<li class="">Name: Joe E, Points: 21</li>
<li class="">Name: Mike, Points: 8</li>
</div>
編輯：所以我想出來的東西，這個心不是理想的，但到目前爲止，它的工作，希望我能得到一個答案，我的意思是這個理想還是我肯定有一個更好的方式來做到這一點，我在這裏學習。
window.greenTeam = new App.Collections.PlayersList(
[
{
team: 'green',
name: 'McGee',
points: '14'
},
{
team: 'green',
name: 'Joe E',
points: '21'
},
{
team: 'green',
name: 'Mike',
points: '8'
}
]
);
window.blueTeam = new App.Collections.PlayersList(
[
{
team: 'blue',
name: 'Steve',
points: '14'
},
{
team: 'blue',
name: 'Eli',
points: '21'
},
{
team: 'blue',
name: 'John',
points: '8'
}
]
);
window.orangeTeam = new App.Collections.PlayersList(
[
{
team: 'orange',
name: 'Kobe',
points: '14'
},
{
team: 'orange',
name: 'Lebron',
points: '21'
},
{
team: 'orange',
name: 'Melo',
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 });
window.greenTeamView = new App.Views.Players({ collection: greenTeam });
window.blueTeamView = new App.Views.Players({ collection: blueTeam });
window.orangeTeamView = new App.Views.Players({ collection: orangeTeam });
編輯：好吧，這是不理想笑，但它的工作原理，看看我的全部代碼，我知道我在這裏拋出了很多的話，但是，如果你看到這個代碼你將如何簡化它，指向任何人解決了這個難題:)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="green"></div>
<div class="blue"></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="player-template">
<div class="">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.GreenPlayer = Backbone.Model.extend({
// Default attributes for the player item.
defaults: {
team: "Green",
name: "Michael",
points: 10,
rebounds: 9
}
});
window.App.Models.BluePlayer = Backbone.Model.extend({
// Default attributes for the player item.
defaults: {
team: "Blue",
name: "Michael",
points: 10,
rebounds: 9
}
});
// Single player view
// ---------------
// This is a view of how a player should look.
window.App.Views.GreenPlayer = Backbone.View.extend({
//el is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#player-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()));
this.$el.addClass(this.model.get('name'));
var test = this.model.get('name');
return this;
}
});
// This is a view of how a player should look.
window.App.Views.BluePlayer = Backbone.View.extend({
//el is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#player-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()));
this.$el.addClass(this.model.get('name'));
var test = this.model.get('name');
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.GreenPlayersList = Backbone.Collection.extend({
// Reference to this collection's model.
model: App.Models.GreenPlayer
// Save all of the player items under the `"players-backbone"` namespace.
//localStorage: new Backbone.LocalStorage("players-backbone"),
});
window.App.Collections.BluePlayersList = Backbone.Collection.extend({
// Reference to this collection's model.
model: App.Models.BluePlayer
// 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.GreenPlayers = 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 greenplayer = new App.Views.GreenPlayer({ model: model });
$('.green').append(greenplayer.render().el);
}
});
window.App.Views.BluePlayers = 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 blueplayer = new App.Views.BluePlayer({ model: model });
$('.blue').append(blueplayer.render().el);
}
});
/*** END PLAYER*S* COLLECTION SETUP ***/
// Dummy Collection, new instance of *App.Collections.PlayersList*
// ---------------
window.greenTeam = new App.Collections.GreenPlayersList(
[
{
team: 'green',
name: 'McGee',
points: '14'
},
{
team: 'green',
name: 'Joe E',
points: '21'
},
{
team: 'green',
name: 'Mike',
points: '8'
}
]
);
window.blueTeam = new App.Collections.BluePlayersList(
[
{
team: 'blue',
name: 'Steve',
points: '14'
},
{
team: 'blue',
name: 'Eli',
points: '21'
},
{
team: 'blue',
name: 'John',
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 });
window.greenTeamView = new App.Views.GreenPlayers({ collection: greenTeam });
window.blueTeamView = new App.Views.BluePlayers({ collection: blueTeam });
//window.orangeTeamView = new App.Views.Players({ collection: orangeTeam });
});
</script>
</body>
</html>
這有意義嗎？如果有另一種方法編號喜歡聽.. –
這對任何人都有意義，我只是試圖將球員與球隊聯繫起來，但我需要將球員列表包裹在團隊視圖中。最終結果應該看起來像就像上面文章中的HTML一樣。 –