CanJS jQuery Template

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

by cherif_b

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.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<script src="http://canjs.com/release/latest/can.map.define.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<div id="main">
    
</div>
<script type="text/x-stache-template" id="personTmpl">
    <x-person>
        {{person.name}}
    </x-person>
</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

can.fixture({
    "GET api/people":function(){
  return [
    {id: 1, name: "Person 1"},
    {id: 2, name: "Person 2"}
  ];
            },"GET api/people/{id}":function(request,response){
  return {id: request.data.id, name: "Person "+request.data.id}
}
});

can.Model.extend('Person',{
     findAll: 'GET api/people',
    findOne: 'GET api/people/{id}',
},{});

can.Component.extend({
    tag:'x-person',
    scope:{
        define:{
            person:{
                get:function(currentPerson,setFn){
                    Person.findOne({id: 2}, setFn);
                }
            }
            
        }
    }
    
});

var frag=can.view('personTmpl',{});

$('#main').html(frag);