Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery
Last active August 29, 2015 13:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save chrisbuttery/9776765 to your computer and use it in GitHub Desktop.
Skater
<!-- multiple skaters -->
<html>
<head>
</head>
<body>
<div class="js-pro-skater">
<span>Favourite Pro Skater: {fullName} of {company}</span><br/>
<span>{firstName} was the best!</span>
</div>
<script src="./components/boot/build/build-dev.js"></script>
<script>
var reactive = require('reactive');
var Emitter = require('emitter');
// get the view but hide it
var tmpl = document.querySelector('.js-pro-skater');
tmpl.parentNode.removeChild(tmpl);
// set up a Constructor function
function Skater(fName, lName, company) {
this.firstName = fName;
this.lastName = lName;
this.fullName = function(){
return this.firstName + ' ' + this.lastName
};
this.company = company;
}
Emitter(Skater.prototype);
// emitter lets us create custom events, so we want it to know about eveything on our Skater - the prototype.
// So we're saying hey emitter, give us the ability to publish or subscribe to custom events on Skater
// like we could say - self.emit("this was updated")
// then later we could listen for this change, self.on("this was updated, doSomethingAmazing());
Skater.prototype.view = function(){
var self = this;
var el = tmpl.cloneNode(true);
var view = window.reactive = reactive(el, this);
Object.observe(this, function(changes){
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
self.emit('change ' + change.name); // < this is the emitter.
}
});
return el;
};
// create multiple skaters
var tony = new Skater('Tony', 'Hawk', 'Birdhouse');
var john = new Skater('John', 'Cardiel', 'Anti-Hero');
var scott = new Skater('Scott', 'Bourne', 'Consolidated');
// dump them on the page
document.body.appendChild(tony.view());
document.body.appendChild(john.view());
document.body.appendChild(scott.view());
// have a look at how you can maniuplate a skater after its rendered here :
// https://github.com/component/reactive/blob/master/examples/observe.html#L73
</script>
</body>
</html>
<!-- single skater -->
<html>
<head>
</head>
<body>
<div class="js-pro-skater">
<span>Favourite Pro Skater: {fullName} of {company}</span><br/>
<span>{firstName} was the best!</span>
</div>
<script src="./components/boot/build/build-dev.js"></script>
<script>
var reactive = require('reactive');
// the view
var tmpl = document.querySelector('.js-pro-skater');
// set up a Constructor function
function Skater(fName, lName, company) {
this.firstName = fName;
this.lastName = lName;
this.fullName = function(){
return this.firstName + ' ' + this.lastName
};
this.company = company;
}
// create a new skater called 'tony'
var tony = new Skater('Tony', 'Hawk', 'Birdhouse');
// reactive to watch 'tmpl' and bind values from 'tony'
window.reactive = reactive(tmpl, tony);
</script>
</body>
</html>
@chrisbuttery
Copy link
Author

In both examples I've exposed 'reactive' to the console (window.reactive) .
So feel free to get in there and poke around.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment