Permalink
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (61 sloc) 1.7 KB
<style>
body {
padding: 50px;
font: 14px Helvetica, Arial;
}
form {
display: inline-block;
border: 1px solid #eee;
padding: 15px 20px;
}
</style>
<div id="pet">
<h2 data-text="name"></h2>
<p><span data-text="name">name</span> is a <span data-text="age">age</span> year old <span data-text="species"></span>, he has {friends.length} friends.</p>
</div>
<form id="edit-pet">
<legend>Edit</legend>
<p>
<input type="text" name="name" value="{name}" placeholder="Name" on-input="updateName" />
</p>
<p>
<input type="text" name="age" value="{age}" placeholder="Age" on-change="updateAge" />
</p>
<p>
<input type="range" min="0" max="10" value="2" name="friends" on-change="updateFriends" />
</p>
</form>
<script src="./reactive.js"></script>
<script>
var Emitter = require.latest('component~emitter');
var reactive = require('reactive');
var tmpl = document.querySelector('#pet');
function Pet(name, age, species) {
this.name = name;
this.age = age;
this.species = species;
this.friends = ['luna', 'manny', 'abby']
}
Emitter(Pet.prototype);
var pet = new Pet('Tobi', 2, 'ferret');
function PetView(pet) {
this.pet = pet;
reactive(tmpl, pet, this);
}
var view = new PetView(pet);
reactive(document.querySelector('#edit-pet'), pet, {
updateFriends: function(e){
var n = parseInt(e.target.value, 10);
pet.friends = Array(n);
pet.emit('change friends', n);
},
updateName: function(e){
pet.name = e.target.value;
pet.emit('change name', e.target.value);
},
updateAge: function(e){
pet.age = parseInt(e.target.value, 10);
pet.emit('change age', pet.age);;
}
});
</script>