Skater
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In both examples I've exposed 'reactive' to the console (window.reactive) .
So feel free to get in there and poke around.