Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.idea
.meteor/local
1 change: 1 addition & 0 deletions .meteor/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
local
9 changes: 9 additions & 0 deletions .meteor/packages
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Meteor packages used by this project, one per line.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

autopublish
jquery
coffeescript
less
34 changes: 1 addition & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,33 +1 @@
# Meteor Leaderboard example with CoffeeScript, Less and Bootstrap

A port of the [Meteor](http://meteor.com/) framework's [Leaderboard example](http://meteor.com/examples/leaderboard) rewritten using [CoffeeScript](http://coffeescript.org/), [Less](http://lesscss.org/) and Twitter [Bootstrap](http://twitter.github.com/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](https://github.com/srackham/leaderboard-coffeescript/blob/master/screenshot.png).

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](http://stackoverflow.com/questions/10109788/callback-after-the-dom-was-updated-in-meteor-js)).

**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.

## Installation
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 git@github.com: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:

meteor run

Tested using Meteor version 0.3.3 and compiled with CoffeeScript version 1.2.0.

This document is also published as a [blogpost](https://srackham.wordpress.com/2012/04/22/meteor-leaderboard-with-coffeescript-less-and-bootstrap/).

tukeq zheng zi system, a half day play with meteor, just for fun.
Loading