Routes and controllers for a sorted table in Ember
The app I am developing includes a user model and users have ratings. I am trying to create a "leaderboard" page that will rate users according to their ratings. I expect thousands of users to use the app, so I would like the rating to be viewable in three ways:
- A Top 100 , which lists the top 100 users.
- A You , which lists 10 people above you, then you, and then 10 people below you.
- A Friends , which shows you and your friends.
I'm not sure what the "best" way to do this is in Ember. My attempt so far seems like I'm repeating a lot of code and / or putting things in the wrong place. Here's my code:
Routes
App.Router.map(function() {
this.resource('leaderboard', function() {
this.route('you', { path: '/' });
this.route('friends');
this.route('top');
});
});
App.LeaderboardYouRoute = Ember.Route.extend({
model: function() {
var users = App.store.find(App.User);
// TODO: sort users by descending score
// TODO: filter out users with an index too far from the user's
return users;
}
});
App.LeaderboardFriendsRoute = Ember.Route.extend({
model: function() {
var users = App.store.find(App.User);
// TODO: sort users by descending score and filter out non-friends
return users;
}
});
App.LeaderboardTopRoute = Ember.Route.extend({
model: function() {
var users = App.store.find(App.User);
// TODO: sort users by descending score and take the top 100
return users;
}
});
leaderboard.handlebars:
<section id="leaderboard">
<nav>
<ul>
<li>{{#linkTo "leaderboard.you"}}You{{/linkTo}}</li>
<li>{{#linkTo "leaderboard.friends"}}Friends{{/linkTo}}</li>
<li>{{#linkTo "leaderboard.top"}}Top 100{{/linkTo}}</li>
</ul>
</nav>
{{ outlet }}
</section>
leaderboard_top.handlebars, leaderboard_you.handlebars, leaderboard_friends.handlebars:
{{#each user in model}}
<li data-user-id="">
<span class="score">{{ user.score }}</span>
<div class="photo"></div>
<span class="name">{{ user.name }}</span>
<div class="clearboth"></div>
</li>
{{/each}}
It seems like overkill to me to have three different templates with the same code. Likewise, I'll have to write a lot of the same code that basically says "Sort users descending". Is there a better way to do this?
source to share
You can easily use the same template for different controllers / views. Which template is used can be determined in the view. Example:
ExampleView = Ember.View.extend({
templateName : "theSameTemplateAgainAndAgain"
});
hth, ph
Update
As the first two comments of this answer show, the solution can be improved if the views are not used at all. Define a template to be displayed directly on the route as shown below.
App.ExampleRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('theSameTemplateAgainAndAgain');
}
});
source to share