Question

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

只列出前100名用户的前100名视图。
一个您视图，列出了您之上的10个人，然后是您，然后是您下面的10个人。
显示您和您的朋友的朋友视图。

我不确定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

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

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

hth，ph

<强>更新

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

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

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

1 个答案: