1

名前とスコアで構成されるリーダーボード流星のサンプルアプリがあります。

トグル ボタンをクリックすると、要素の順序がスコアと名前の間で切り替わるようにします。これが私が試したことです: Javascript:

// Set up a collection to contain player information. On the server,
// it is backed by a MongoDB collection named "players".

Players = new Meteor.Collection("players");
Session.set("sort_by", "score");  

if (Meteor.isClient) {


   Template.leaderboard.players = function () {
    return Players.find({}, {sort: {score: -1}});
  };



  Template.leaderboard.selected_name = function () {
    var player = Players.findOne(Session.get("selected_player"));
    return player && player.name;
  };

  Template.player.selected = function () {
    return Session.equals("selected_player", this._id) ? "selected" : '';
  };

  Template.leaderboard.events({
    'click input.inc': function () {
      Players.update(Session.get("selected_player"), {$inc: {score: 5}});
    },
    'click input.toggle': function(){
    var switch_sort = Session.equals("sort_by", "name")?"score":"name";
     Session.set("sort_by", switch_sort);  
     var togg = Session.get("sort_by");
     if (togg == "score"){

           Players.find({}, {sort: {score: -1}});

     } else {

                 Players.find({}, {sort: {name: -1}});


     }
  }
  });

  Template.player.events({
    'click': function () {
      Session.set("selected_player", this._id);
    }
  });
}

// On server startup, create some players if the database is empty.
if (Meteor.isServer) {
  Meteor.startup(function () {
    if (Players.find().count() === 0) {
      var names = ["Ada Lovelace",
                   "Grace Hopper",
                   "Marie Curie",
                   "Carl Friedrich Gauss",
                   "Nikola Tesla",
                   "Claude Shannon"];
      for (var i = 0; i < names.length; i++)
        Players.insert({name: names[i], score: Math.floor(Math.random()*10)*5});
    }
  });
}

HTML

<head>
  <title>Leaderboard</title>
</head>

<body>
  <div id="outer">
    {{> leaderboard}}
  </div>
</body>


<template name="leaderboard">
   <input type="button" class="toggle" value="toggle sort" />

  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give 5 points" />
  </div>
  {{/if}}

  {{#unless selected_name}}
  <div class="none">Click a player to select</div>
  {{/unless}}
</template>

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

問題は確かにJSでの私の試みにあります。私はメテオ/モンゴが初めてなので、助けていただければ幸いです

ありがとう！

4

2 に答える 2

1

私はこのようにすることができました。

    // Set a session var to store current sort order 
    // Do this first thing in the Meteor.isClient *if*
    Meteor.startup(function(){
        Session.set("sort_by", {score: -1, name: 1});
    });

プレーヤーの並べ替えがここで処理されることに注意してください。

    Template.leaderboard.players = function () {
        // The commented line below is the original line in the code
        // return Players.find({}, {sort: {score: -1, name: 1}});

        // Replace line above for the line below
        return Players.find({}, {sort: Session.get("sort_by")});
    };

ボタンからイベントを処理する必要があることを確認したら、次のようにします。

  • HTML ファイルにボタンを作成します (例):

    <input type="button" class="sort" value="Order by Name"/>

  • JS ファイルでイベントを処理します (このハンドラーは既に存在していることに注意してください。コードを追加しているだけです)。

    Template.leaderboard.events({

    'click input.inc': function () {
    Players.update(Session.get("selected_player"), {$inc: {score: 5}});},

    // This is the code you need
    'click input.sort': function () {
        var sort_by = Session.get("sort_by");
        if(Object.keys(sort_by)[0] == "score"){
            Session.set("sort_by", { name: 1, score: -1 });
        }
        else{
            Session.set("sort_by", { score: -1, name: 1 });
        }
    },
});

それで十分なはずです。

于 2013-08-09T17:33:40.127 に答える
1

リーダーボードは Template.leaderboard.players に保存されている関数を使用してリストを作成しているように見えます。そこに sort_by コードを入れる必要がありますか? このような？

Template.leaderboard.players = function () {
    var togg = Session.get("sort_by");
    if (togg == "score"){
       return Players.find({}, {sort: {score: -1}});
    } else {
        return Players.find({}, {sort: {name: -1}});
    }
};

これは単なる提案です-私は流星を知らないので、機能を再実行する方法がわかりません。

于 2013-01-18T13:43:42.827 に答える