<div id="todo"></div> <!-- PUT ANY TEMPLATES YOU NEED HERE --> <script id="todoEJS" type="text/ejs"> <p id="msg"><b><%= todo.attr('name') %></b> <i>created <%= prettyDate( todo.attr('due') ) %></i></p> </script>
(function() { // create a observe that has a property with the date right now var dateObserve = new can.Observe({ now : new Date() }) // update that property every second setTimeout(function(){ dateObserve.attr('now',new Date() ); setTimeout(arguments.callee, 1000); },1000) // create a prettyDate helper can.EJS.Helpers.prototype.prettyDate = function(date){ // compare the date passed in with 'now' var difference = (dateObserve.attr('now') - date) / 1000; if(difference < 1.2){ return "a second ago" } else if (difference < 3.5) { return Math.round(difference)+" seconds ago" } else if (difference < 10 ) { return "a couple seconds ago" } else if (difference < 20 ) { return "some seconds ago" } else if (difference < 30 ){ return "a few seconds ago" } else if (difference < 40 ) { return "a half min ago" } else { return Math.round(difference/60)+" min ago" } } // create and render the todo var todo = new can.Observe({ name : "Eat", due : new Date() }) $("#todo").html(can.view("todoEJS", {todo: todo })); })();
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700); * { font-family: 'Lato', sans-serif; font-size: 16px; text-shadow: 0 1px 0 #ffffff; color: rgb(185, 74, 72); } #todo { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 10px; border: solid 1px rgb(238, 211, 215); margin: 8px; background-color: rgb(242, 222, 222); }