ember.js - Ember 中排序表的路由和 Controller

Question

我正在开发的一个应用程序包括一个用户模型，用户有分数。我正在尝试创建一个“排行榜”页面，该页面将根据用户的分数对用户进行排名。我预计会有成千上万的人使用该应用程序，因此我希望可以通过三种方式查看排名:

1. Top 100 View ，仅列出前 100 位用户。
2. 一个你 View ，列出了你上面的 10 个人，然后是你，然后是你下面的 10 个人。
3. 显示您和您的 friend 的 friend View 。

我不确定在 Ember 中“最好”的方法是什么。到目前为止，我的尝试似乎是在重复很多代码和/或把东西放在错误的地方。这是我的代码:

路线:

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}}

拥有三个代码完全相同的不同模板对我来说似乎是多余的。同样，我将不得不编写大量相同的代码，基本上都是“按分数降序对用户排序”。有更好的方法吗？

Answer 1

您可以轻松地为不同的 Controller / View 使用相同的模板。使用哪个模板，可以在 View 中定义。示例:

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

hth, ph

更新

正如该答案的前两条评论所指出的，如果根本不使用 View ，解决方案可能仍会得到改进。定义要直接在 Route 上呈现的模板，如下所示。

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