#351 A Look at Meteor pro

May 16, 2012 | 15 minutes | Ajax, Tools

Meteor is a JavaScript framework for building rich client-side applications. Here I re-create the Raffler app to compare with Backbone.js and Rails. Meteor may not be related to Rails, but I think many will find it interesting.

Click to Play Video ▶

Download:
source codeProject Files in Zip (3.36 KB)
mp4Full Size H.264 Video (41.5 MB)
m4vSmaller H.264 Video (18.4 MB)
webmFull Size VP8 Video (20.5 MB)
ogvFull Size Theora Video (43 MB)

Browse Source Code

Resources

          terminal
        
curl install.meteor.com | sh
meteor create raffler
cd raffler
meteor
meteor list
meteor add coffeescript
meteor deploy railscasts-raffler.meteor.com

          raffler.coffee
        
Entries = new Meteor.Collection("entries")

if Meteor.is_client
  Template.raffle.entries = -> Entries.find()
  
  Template.raffle.events =
    'submit #new_entry': (event) ->
      event.preventDefault()
      Entries.insert(name: $('#new_entry_name').val())
      $('#new_entry_name').val('')
    
    'click #draw': ->
      winner = _.shuffle(Entries.find(winner: {$ne: true}).fetch())[0]
      if winner
        Entries.update({recent: true}, {$set: {recent: false}}, {multi: true})
        Entries.update(winner._id, $set: {winner: true, recent: true})
  
  Template.entry.winner_class = ->
    if this.recent then 'highlight' else ''

          raffler.html
        
<head>
  <title>Raffler</title>
</head>

<body>
  <div id="container">{{> raffle}}</div>
</body>

<template name="raffle">
  <h1>Raffler</h1>

  <form id="new_entry">
    <input type="text" name="name" id="new_entry_name">
    <input type="submit" value="Add">
  </form>
  
  <ul id="entries">
    {{#each entries}}
      {{> entry}}
    {{/each}}
  </ul>
  
  <button id="draw">Draw Winner</button>
</template>

<template name="entry">
  <li>
    {{name}}
    {{#if winner}}
      <span class="winner {{winner_class}}">WINNER</span>
    {{/if}}
  </li>
</template>