3

私が開発しているアプリケーションには User モデルが含まれており、ユーザーにはスコアがあります。スコアに従ってユーザーをランク付けする「リーダーボード」ページを作成しようとしています。何千人もの人々がアプリを使用すると予想されるため、ランキングを次の 3 つの方法で表示できるようにしたいと考えています。

  1. 単純に上位 100 人のユーザーを一覧表示する上位100ビュー。
  2. あなたより上の 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}}

まったく同じコードで 3 つの異なるテンプレートを用意するのは冗長に思えます。同様に、「スコアの降順でユーザーを並べ替える」という基本的なコードと同じコードを大量に作成する必要があります。これを行うより良い方法はありますか？

4

1 に答える 1

2

異なるコントローラー/ビューに同じテンプレートを簡単に使用できます。どのテンプレートを使用するかは、ビューで定義できます。例：

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

hth、ph

アップデート

この回答の最初の 2 つのコメントが指摘しているように、ビューがまったく使用されていない場合でも、ソリューションは改善される可能性があります。以下に示すように、Route で直接レンダリングされるようにテンプレートを定義します。

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