funcunit
Version:
<!-- @hide title
150 lines (138 loc) • 3.48 kB
HTML
<html lang="en">
<head>
<title>Observe Backup Demo</title>
<style type='text/css'>
body {font-family: verdana}
li {border: solid 1px gray; padding: 5px; width: 250px;}
li a {color: red; font-weight: bold;}
p {width: 400px;}
#demo-html {
height: 150px;
}
#update {
margin: 10px 0;
}
#restore {
padding-top: 10px;
}
#contacts a {
cursor: pointer;
}
</style>
</head>
<body>
<div id="demo-instructions">
<h1>Observe Backup Demo</h1>
<p>This demo shows backing up and restoring model instances.
Click the names to change birthdays. After changing some birthdays,
click RESTORE.
</p>
</div>
<div id="demo-html">
<div id='contacts'></div>
<div id='update'></div>
<a href='javascript://' id='restore'>RESTORE</a>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main="@empty"></script>
<script type='text/javascript'>
steal('can/map/backup',
'can/map/delegate',
'can/map/attributes',
'can/model',
'can/util/fixture',
'can/view/ejs',
function(){
can.fixture("/contacts.json", function(orig, settings, headers){
return [
{
'id': 1,
'name' : 'Justin Meyer',
'birthday': '1982-10-20'
},
{
'id': 2,
'name' : 'Brian Moschel',
'birthday': '1983-11-10'
},
{
'id': 3,
'name' : 'Motley Crew',
'birthday': '1980-2-10'
}
];
});
Contact = can.Model.extend({
attributes : {
birthday : 'date'
},
convert : {
date : function(raw){
if(typeof raw == 'string'){
var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
return new Date( +matches[1],
(+matches[2])-1,
+matches[3] )
}else if(raw instanceof Date){
return raw;
}
}
},
findAll : 'GET /contacts.json',
update : 'POST /contacts.json'
},{
ageThisYear : function(){
return new Date().getFullYear() -
this.birthday.getFullYear()
},
getBirthday : function(){
return ""+this.birthday.getFullYear()+
"-"+(this.birthday.getMonth()+1)+
"-"+this.birthday.getDate();
}
});
var makeAgeUpdater = function(contact){
var updater = $("#update")
updater.html("");
updater.append(contact.name+"'s birthday");
can.$('<input type="text" />').val(
contact.getBirthday())
.change(function(){
contact.attr('birthday', this.value);
}).appendTo(updater);
}
can.$('#contacts').delegate("li","click", function(){
makeAgeUpdater( can.$(this).data('model') );
});
Contact.findAll({},function(contacts){
var contactsEl = can.$('#contacts');
can.each(contacts, function(contact){
// add the contact to the page
var li = can.$('<li>')
.data('model', contact)
.html(contact.name + " "+
contact.ageThisYear() +
" <a>Show</a>")
.appendTo(contactsEl);
// listen for changes in birthday
contact.bind("birthday", function(){
li.html(contact.name + " " +
this.ageThisYear() +
" <a>Show</a>");
})
// backup the contact
contact.backup();
})
// on restore, update all contacts
can.$("#restore").click(function(){
contacts.each(function(){
this.restore()
});
$('#update').html('');
});
});
})
</script>
</body>
</html>