Meteor Reactivity Playground

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

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>
<!-- 
  For ideas of what to try, go to 
  http://manual.meteor.com/
-->
<hr/>
<input id="name" value="Joe"/>
<button id="set-name">ddd It</button>

<hr/>
<div id="changes">
</div>

<a id="fs" style="position:absolute; top: 5px; left: 5px;" href="http://jsfiddle.net/chicagogrooves/9y49s6so/embedded/result/" target="_blank">Launch Full Screen -&gt;</a>

CSS

#fs{ margin-left: 15px; }

JavaScript

// set up a reactive object
var reactivePerson;

reactivePerson = (function(name, notifier) {
  return {
    getName: function() {
      notifier.depend();
      return name;
    },
    setName: function(n) {
      if (name !== n) {
        name = n;
        return notifier.changed();
      }
    }
  };
})("Joe", new Tracker.Dependency());

// upon changes, write to DOM and console
Tracker.autorun(function() {
  var s = "The name is " + reactivePerson.getName();
  $("#changes").append( $("<p/>").append(s) );
  console.log(s);
   
});

// set up events
$("#set-name").on("click", function(e){
   reactivePerson.setName( $("#name").val() ); 
});