CODEWITHSUNDEEP
ember.jsember-data
NudeCanalTroll
NudeCanalTroll

Reputation: 2286

Routes and controllers for a sorted table in Ember

An application I'm developing includes a User model, and users have scores. I'm trying to create a "leaderboard" page that will rank users according to their scores. I anticipate thousands of people using the app, so I'd like the rankings to be viewable in three ways:

  1. A Top 100 view that simply lists the top 100 users.
  2. A You view that lists the 10 people above you, then you, then the 10 people below you.
  3. A Friends view that shows you and your friends.

I'm not sure what the "best" way to go about 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 redundant to me to have three different templates with the exact same code. Similarly, I'm going to have to write a lot of the same code that basically says, "Sort users by descending score". Is there a better way to do this?

Upvotes: 3

Views: 296

Answers (1)

Patrick Hammer
Patrick Hammer

Reputation: 1172

You can easily use the same template for different controllers/views. Which template is used, can be defined in the view. Example:

ExampleView = Ember.View.extend({
  templateName : "theSameTemplateAgainAndAgain"
});

hth, ph

Update

As the first two comments of this answer point out, the solution may still be improved if the views are not used at all. Define the template to be rendered directly on the Route as shown below.

App.ExampleRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('theSameTemplateAgainAndAgain');
  } 
});

Upvotes: 2

Related Questions