流星排行榜应用程序

时间:2012-04-26 17:05:09

标签: javascript meteor leaderboard

我是一个尝试学习和喜欢排行榜应用程序的新手。如何找到资源以了解如何提出建议:


制作一个按分数排序和按名称排序之间切换的按钮。提示:使用Session变量来保存当前的排序选项。

创建一个按钮,将每个人的分数重置为随机数。 (已经有代码可以在服务器启动代码中执行此操作。您能否考虑一些代码并让它在客户端和服务器上运行?)

实施一种在排行榜中添加和删除科学家的方法。

我很想学习如何做这些事情。

5 个答案:

答案 0 :(得分:2)

流星是非常新的。不幸的是,网上没有丰富的信息,很少有教程存在。您最好的信息和学习来源是文档。

Meteor docs: http://docs.meteor.com/

Tutoial: http://www.skalb.com/2012/04/16/creating-a-document-sharing-site-with-meteor-js/

有关如何进行聊天的视频: http://vimeo.com/40300075

答案 1 :(得分:1)

我已经在我的Leaderboard端口中实现了排序以及一些其他增强功能到CoffeeScript + Less + Bootstrap。

博客https://srackham.wordpress.com/2012/04/22/meteor-leaderboard-with-coffeescript-less-and-bootstrap/

代码https://github.com/srackham/leaderboard-coffeescript

答案 2 :(得分:0)

我使用了最新的demonstration个缔约方,其中包含您正在寻找的代码。了解用户如何创建派对。这些例子非常好。

您可以通过运行以下方式提取应用程序并查看代码:

meteor create --example parties

特别关注model.js文件:

 createParty: function (options) {
    options = options || {};
      throw new Meteor.Error(400, "Required parameter missing");
    if (options.title.length > 100)
      throw new Meteor.Error(413, "Title too long");
    if (options.description.length > 1000)
      throw new Meteor.Error(413, "Description too long");
    if (! this.userId)
      throw new Meteor.Error(403, "You must be logged in");

    return Parties.insert({
      owner: this.userId,
      title: options.title,
      description: options.description,
    });

您需要一个好的IDE来跟踪每个方法的调用方式。我使用Sublime Text2来搜索“createParty”的实例,依此类推。你可以拆开应用程序;尝试查看是否可以向派对应用添加其他字段以测试您的知识。带上自己的啤酒复选框?

将您的阅读重点放在Meteor.methods中的Meteor.publishMeteor.subscribeMeteor Docs上。模板事件也帮助了我。

答案 3 :(得分:0)

我是Meteor的新手,但通过以下方式实现了这个目标:

* 在HTML中

<template name="leaderboard">
  <div class="sort">
    <input type="button" class="sortByName" value="name" />
    <input type="button" class="sortByScore" value="score" />
  </div>
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>
...

* 在leaderboard.js文件中

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

Template.leaderboard.events({
  'click input.inc': function () {
    Players.update(Session.get("selected_player"), {$inc: {score: 5}});
  },
  // if name button is clicked
  'click input.sortByName': function () {
    Session.set("sortByName", true);
  },
  // if score button is clicked
  'click input.sortByScore': function () {
    Session.set("sortByName", false);
  }
});

答案 4 :(得分:0)

我找到了这个网站。我认为这里的解释非常好。

meteor-tutorial-for-fellow-noobs