Meteor Leaderboard example with CoffeeScript, Less and Bootstrap
This port has been enhanced with Bootstrap styling, a drop-down menu and tooltips. You can also add and delete players, reset the data and sort players by name and score. The changes to the original example reflect these enhancements. I've made use of the jQuery
$.extend() API to soak up repetitive template property assignments.
Here's a screenshot.
The only tricky bit was setting the tooltip popup events (with Bootstrap's jQuery
tooltip() plugin method) after template (re)rendering. This is done with the
Template.player.enable_tooltips method which is invoked each time the 'player' template is rendered. Execution is deferred until the template has been rendered using the
Meteor.defer method (see this stackoverflow discussion).
NOTE: When an element with a tooltip is clicked tooltip popups are deleted, this prevents zombie tooltips from occuring when the corresponding DOM elements are deleted or moved.
To install create a meteor project and clone this repo into it (you have to move the
.meteor directory out temporarily else git refuses to clone). You also need to install the Meteor jquery package and compile the CoffeeScript and Less files (in my development environment I have configuired Vim to auto-compile CoffeeScript and Less files):
meteor create leaderboard-coffeescript rm leaderboard-coffeescript/* mv leaderboard-coffeescript/.meteor/ /tmp git clone firstname.lastname@example.org:srackham/leaderboard-coffeescript.git mv /tmp/.meteor/ leaderboard-coffeescript/ cd leaderboard-coffeescript/ meteor add jquery coffee -c leaderboard.coffee lessc client/leaderboard.less client/leaderboard.css
To start the project in the built-in Meteor server:
Tested using Meteor version 0.3.3 and compiled with CoffeeScript version 1.2.0.
This document is also published as a blogpost.