CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by donejs

HTML

<script src="http://canjs.com/release/2.0.1/can.jquery.js"></script>
<script src="http://canjs.com/release/2.0.1/can.ejs.js"></script>
<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>

CSS

@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);
}

JavaScript

(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 }));    
 
})();