3

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

  1. 仅列出前 100 名用户的前100名视图。
  2. A You视图列出了您上方的 10 个人，然后是您，然后是您下方的 10 个人。
  3. 显示您和您的朋友的朋友视图。

我不确定在 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;
  }
});

排行榜.车把：

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

对我来说，拥有三个具有完全相同代码的不同模板似乎是多余的。类似地，我将不得不编写许多基本相同的代码，即“按降分对用户进行排序”。有一个更好的方法吗？

4

1 回答 1

2

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

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

hth, ph

更新

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

App.ExampleRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('theSameTemplateAgainAndAgain');
  } 
});
于 2013-02-13T19:57:56.700 回答