CanJS jQuery Template

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

by juristr

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
p { 
    margin: 10px 0;
}

JavaScript

(function() {
    
    can.fixture("GET /applications/1", function() {
        return {
            "id": "1",
            "dept": "JavaScripters",
            "applicant1": {
                "name": "Trent Reznor",
                "age": "40"            
            }
        };
    });
    
    Applicant = can.Model({
        defaults: {
            name: 'CanJS Dude',
            age: 30,
            position: 'Beer Drinker'            
        }
    },{
        getResume: function() {
            return this.attr('name') + ' is hired!';   
        }
    });
    
    Application = can.Model({
        defaults: { 
            amount: 10 
        },
        attributes: {
            applicant1: 'Applicant.model'
        },
                          
        findOne: 'GET /applications/{id}'
    },{
        doSomething: function() {
            alert('A prototype function. Cool.');
        }            
    });
    
    can.when(Application.findOne({id: 1})).done(function(a) {
        console.dir(a);
        console.log(a.attr('applicant1').getResume());
    });
    
    var app = new Application();
    console.log('Amount: ' + app.attr('amount'));
})();