<div id="todo"></div>
<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="app-template" type="text/mustache">
<h1><b>{{ message }}</b>
<i>created {{ prettyDate createdAt }}</i></h1>
</script>
(function() {
// create a observe that has a property with the date right now
var data = new can.Map({
message: "Hello World",
createdAt: new Date()
})
var now = can.compute( new Date() )
// update that property every second
setTimeout(function(){
now( new Date() );
setTimeout(arguments.callee, 1000);
},1000)
// create a prettyDate helper
var dateHelper = function(date){
// compare the date passed in with 'now'
var timeElapsed = ( now() - date() ) / 1000;
if(timeElapsed < 1.2){
return "a second ago"
} else if (timeElapsed < 10 ) {
return "a couple seconds ago"
} else if (timeElapsed < 20 ) {
return "some seconds ago"
} else if (timeElapsed < 30 ){
return "a few seconds ago"
} else if (timeElapsed < 40 ) {
return "a half min ago"
} else {
return Math.round(timeElapsed/60)+" min ago"
}
}
var frag = can.view("app-template", data, {prettyDate: dateHelper});
$("#todo").html(frag);
})();