Ember.js Ember中已排序表的路由和控制器

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

仅列出前100名用户的Top100视图

你视图，列出你上面的10个人，然后是你，然后是你下面的10个人

显示您和您的朋友的朋友视图

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

路线：

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

排行榜。车把：

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

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

{{{链接到“排行榜.你”}你{{/linkTo}
{{{#链接到“排行榜.朋友”}朋友{{/linkTo}
{{{#linkTo“leadboard.top”}前100名{{/linkTo}

{{outlet}}

排行榜\顶部。车把，排行榜\你。车把，排行榜\朋友。车把：

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

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

{{{#模型中的每个用户}

{{user.score}
{{user.name}

{{/每个}}

---

对于我来说，使用完全相同的代码使用三个不同的模板似乎是多余的。类似地，我将不得不编写许多基本上说“按分数递减排序用户”的相同代码。有更好的方法吗？

您可以轻松地为不同的控制器/视图使用相同的模板。可以在视图中定义使用的模板。例如：

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

hth，ph

更新

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

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

---

你不会对所有三条路线都使用相同的视图（因此使用相同的模板）吗？我如何使用相同的视图？我的印象是，{{outlet}}助手将根据单击的链接自动替换为排行榜TopView、排行榜YouView或排行榜FriendsView。因此，我创建了三个不同的视图。@phammer在下面有它。因此，在这种情况下，我会保留我的三个单独的视图文件（LeadsboardTopView、LeadsboardYouView和LeadsboardFriendsView），但只是让它们都指向同一个模板？是的，你的权利。最好直接在路线上定义，请在一分钟后的答案中查看我的更新。