Meteor Reactivity Playground

lay with Tracker, ReactiveDict and ReactiveVar, and HTMLJS in any browser tab, even about:blank!

by chicagogrooves

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://s3.amazonaws.com/www.chicagogrooves.com/js/meteor-reactive-packages.js"></script>
<script src="https://s3.amazonaws.com/www.chicagogrooves.com/js/meteor-html.js"></script>
<script src="https://s3.amazonaws.com/www.chicagogrooves.com/js/teacup.js"></script>
<!-- 
  For ideas of what to try, go to 
  http://manual.meteor.com/
-->
<input id="name" value="Joe"/>
<button id="set-name">Set It</button>
<a id="fs" href="http://jsfiddle.net/chicagogrooves/71smvfs7/embedded/result/" target="_blank">Launch Full Screen -&gt;</a>
<hr/>
<div id="changes">
</div>

CSS

#fs{ margin-left: 15px; }

CoffeeScript

reactivePerson = do(name="Joe", notifier = new Tracker.Dependency()) ->
  getName: ->
    notifier.depend()
    name
  setName: (n)->
    if name isnt n
      name = n
      notifier.changed()
      
Tracker.autorun ->
  msg = "The name is " + reactivePerson.getName()
  console.log msg
  $("#changes").append $("<p/>").append(msg)
    
    
# set up events
$("#set-name").on "click", (e)->
  reactivePerson.setName $("#name").val()