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>
<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>

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